Preview Lark/Feishu Universal Card DSL JSON inside VS Code. Rendering is provided by open-feishu-card, including its DSL conversion, inline header texture, and icon font.
Features
Open a .card file directly in the card preview; use the Source button when you need to edit its JSON.
Open every .json file as source, then use the preview button in the editor title bar to split the editor and open a card preview on the right.
Switch any card preview back to its JSON source with the code button at the left of the editor title toolbar.
Click the Open Preview to the Side icon in the editor title bar to keep the source on the left and a live preview on the right.
Use Reopen Editor With... → Text Editor when you want to edit a .card file as source.
Run Lark Card Preview: Open Preview to the Side for an active .json file or from Explorer.
Clear JSON parsing errors with a one-click jump to the approximate source location.
Follow VS Code's light/dark appearance, or force a preview theme in Settings.
Resolve image IDs with an optional larkCardPreview.imageBaseURL prefix.
Render entirely inside the extension: no preview service and no network request by default.
The renderer accepts developer-authored Card DSL using JSON Schema 2.0, including body.elements and markdown string content.
Try it
Run npm install.
Press F5 to launch the Extension Development Host.
Open any .card file, a Lark card .json file, or run Lark Card Preview: Open Sample Card from the Command Palette.
A .card opens directly in the preview; use Source to edit its JSON.
A .json opens as source; click the preview button in the editor title bar to keep the source on the left and open the preview on the right.
You can also open samples/welcome.card directly.
Commands
Command
Purpose
Lark Card Preview: Open Preview to the Side
Keep the active JSON source open and preview it beside the editor.
Lark Card Preview: Open Sample Card
Open the bundled DSL example.
Lark Card Preview: Refresh Preview
Re-render visible standalone previews.
Settings
Setting
Default
Purpose
larkCardPreview.preview.theme
auto
Use auto, light, or dark.
larkCardPreview.preview.maxWidth
650
Maximum rendered card width in pixels.
larkCardPreview.render.warnOnUnknownTag
true
Log unsupported card element tags in the Extension Host.
larkCardPreview.imageBaseURL
empty
Prefix for unresolved image values.
Build and package
npm run compile
npm run package
npm run vsix
The extension host bundle is emitted to dist/extension.js. open-feishu-card is bundled into that file, while its styles and icon font are copied into dist as Webview resources. VSIX packaging therefore does not need to inspect or include the package-manager dependency tree.
Security model
The card HTML is rendered by open-feishu-card and displayed inside a VS Code Webview with a restrictive Content Security Policy. Webviews are isolated from the extension host and workspace filesystem. Remote images are allowed so cards with direct HTTP(S) image URLs can be previewed; no access token is requested or stored by this extension.
