jsonify
jsonify lets you instantly convert HTML and SVG files to Microsoft SharePoint List Formats. Right click on an SVG or HTML file and choose Convert to SP List Format
and a new editor will open with a column format that draws your image. As you make changes to your original file, the format will continue to update. Wowee!
jsonify also extends the definition of JSON to inject support for HorseScript syntax highlighting (list formatting expressions). This means your expressions get true syntax highlighting even when written as JSON properties - and not just highlighting Jsonify adds completions, signature helpers, and hover cards all for inline expressions. Additional Wowee!
Features
Syntax Highlighting
Details
- Syntax highlighting of expressions
- Hover provider (documentation and guidance)
- Completion provider (intellisense)
- Signature Helper (function guidance and parameter mapping)
- Maps all supported attributes and styles
- Automatically converts common SVG shape elements (
rect
, circle
, ellipse
, line
, polyline
, and polygon
) to paths
- Collapses SVG element groups and other non-visual containers (ie
g
)
- Generated formats are kept in sync with your original file (until you save or close them)
- Classes defined in style elements are applied and removed
- Classes only used in selectors or applied directly to elements are maintained
- SPFx style theme token support (instead of
color: white;
use color: "[theme:white]";
)
- Use formatting expressions as CSS properties and other attribute values
- Warrior Horse Theme (Dark)
Just open an SVG or HTML file, right click and choose Convert to SP List Format
to have a new window open with a column format that will render your original file as close as possible.
Changes to your original will continue to show up in the generated format! Saving the format file will disconnect the live updates.
Requirements
None - However, works great with the SP Formatter extension to enable live previews of your SharePoint List Formats!
HTML files can be fully formed HTML (with a body
and all that stuff) or just one or more elements sitting around waiting to get formatted. Inline styles and style tags are fully supported (linked stylesheets are not).
Extension Settings
jsonify.liveUpdates
This configuration option controls whether the JSON formatting updates in real-time as you make changes to your SVG or HTML files.
When jsonify.liveUpdates
is set to true
(default), the extension will automatically update the formatted JSON in the associated editor window as you make changes to your files. This allows you to see the effects of your changes immediately, without needing to manually trigger the formatting.
When jsonify.liveUpdates
is set to false
, the extension will not automatically update the formatted JSON. Instead, you will need to manually trigger the formatting by running the Convert to SP Format
command. This will reuse the window when possible.
Please note that live updates may have a performance impact, especially on larger files. If you experience performance issues, consider turning off live updates.
You can change this setting in your workspace or user settings. Here's how:
Open the settings by pressing Ctrl+, on Windows or Cmd+, on Mac.
Search for jsonify.liveUpdates
.
Toggle the setting on or off as desired.
Known Issues
- Linked style sheets are not evaluated
- Horsescript definition provides many advanced language features but does not yet provide error checking
Release Notes
All details can be found in the jsonify CHANGELOG