Framewright

简体中文

Turn a single-file HTML prototype into a visual canvas—without giving up the source.

Framewright is a VS Code extension for generating, importing, and visually editing self-contained HTML prototypes. Select a real element on the Canvas, adjust its text or appearance, and Framewright writes a minimal edit back to the HTML document open in VS Code.

The HTML document is the source of truth. The Canvas is the fast, visual way to edit it.

Download the release · Read the 5-minute guide · Report an issue

What You Can Do

• Generate a complete HTML page with DeepSeek or Kimi K3 and watch validated snapshots appear on the Draft Canvas.
• Import an existing .html or .htm file locally—no Provider call—and create an editable working copy.
• Select, drag, and resize elements directly on Desktop, Tablet, or Mobile previews.
• Change background, text, and border colors; radius, size, opacity, border, texture, and shadow.
• Edit font family, size, weight, line height, letter spacing, and alignment.
• Edit text in the floating inspector, or double-click text directly on the Canvas.
• Write visual changes back to native HTML source, then Undo or Redo Framewright edits.
• Ask AI for a precise selected-element patch or a reviewed full-page proposal.
• Use the extension UI in English or Simplified Chinese.

See Framewright in Action

Select and edit

Canvas overview	Text editing

Style, preview, and verify the source

Color and radius controls	Responsive preview

Install

Visual Studio Marketplace

1. Open Extensions in VS Code.
2. Search for Framewright.
3. Select Install.

Or run:

code --install-extension framewright.framewright

Framewright requires VS Code 1.128.0 or newer.

Framewright runs only in a trusted workspace because it reads and writes HTML and can, after confirmation, send selected content to an AI Provider.

Install a local VSIX

code --install-extension framewright-0.1.0.vsix

Your First Edit

1. Open a complete, self-contained HTML document in VS Code.
2. Select the Framewright icon in the Activity Bar.
3. Choose Open canvas, then Start mouse editing.
4. Select an element in the Canvas.
5. Use the floating inspector to edit text, color, radius, layout, surface, or typography.
6. Watch the HTML document update in the native editor.
7. Save with VS Code when you are ready.

Framewright intentionally does not call document.save(). Your normal VS Code Save or Auto Save setting remains in control.

For generation, import, Provider setup, AI proposals, keyboard behavior, and troubleshooting, follow the complete getting-started guide.

Text Editing

When the selected element has a safe text target:

• Edit Text content in the floating inspector.
• Press Enter or choose Apply to write the text to source.
• Press Shift+Enter for a supported line break.
• Press Esc to restore the current source text in the inspector.
• Or double-click the text on the Canvas, edit in place, and press Enter to commit or Esc to cancel.

Text nodes and text separated by <br> are supported. A parent containing nested markup such as <span> or <em> is not flattened automatically; select an editable child or use Code instead.

Visual Controls

Edits available for an element are determined by the Host-built element manifest. Controls are disabled rather than guessing when Framewright cannot prove a safe source range.

Generate or Import HTML

Generate with AI

1. Open Framewright Controls.
2. Choose Create page and a configured Provider.
3. Describe the interface you want.
4. Review the Provider, model, and possible cost confirmation.
5. Watch the validated draft stream into the Canvas.
6. Open the result as a saveable HTML copy, save it, and start mouse editing.

Import an HTML file locally

Choose Import HTML file…. Framewright reads and validates the file locally, then offers:

• Clean & enable low-latency editing (recommended): creates an unsaved working copy, normalizes the structure, and assigns stable data-fw-id values.
• Import as-is: preserves the structure, but precise targeting and minimal diffs are not guaranteed.

The original file is not modified. Local file import does not call an AI Provider. Imported documents must be complete HTML and pass the preview safety checks; active scripts, inline event handlers, JavaScript URLs, external stylesheets, and CSS @import are rejected.

The separate Organize with AI input does send the pasted content to the selected Provider after an explicit confirmation.

AI Providers and Reviewed Changes

Framewright currently includes Host-side profiles for:

• DeepSeek — fixed official API origin with a configurable model name.
• Kimi K3 — fixed Moonshot API endpoint and Kimi K3 model profile.

Use Provider in Framewright Controls to set or delete a key. Credentials are entered through a native VS Code password input and stored per Provider in VS Code SecretStorage; the Webview receives only credential status.

The Composer offers three routes:

• Create page: sends your request and optional design direction after cost confirmation.
• Modify page: sends either scoped selected-element context or the current HTML document after a scope/cost confirmation. The result is a proposal; applying it requires another confirmation.
• Chat only: sends the chat request and does not read or modify the current page.

Provider usage may incur charges from the Provider. Framewright does not include Provider credits.

Language

Framewright supports English and Simplified Chinese for Controls, Canvas UI, native confirmations, commands, and settings.

Set Settings → Extensions → Framewright → Language, or add:

{
  "framewright.language": "auto"
}

Allowed values are auto, en, and zh-cn. auto follows supported VS Code Chinese locales and otherwise uses English. Reopen the view after changing the setting.

Privacy and Safety

• API keys stay in VS Code SecretStorage and are not returned to the Webview.
• Framewright is disabled in untrusted workspaces; trust a workspace only when you understand its contents.
• Local HTML file import does not use a Provider.
• Every paid generation/organization route asks for confirmation before the request.
• Full-page modifications ask again before applying generated source.
• The Canvas renders a derived document in a sandboxed iframe with a restrictive Content Security Policy; preview networking, navigation, forms, frames, and user scripts are blocked.
• Native HTML remains authoritative. Visual edits pass through the Host writeback service with target, generation, and source validation.

Read SECURITY.md before using sensitive source or Provider credentials. Never paste an API key into an issue, prompt, HTML file, or screenshot.

Current Limits

• Framewright targets self-contained, single-file HTML prototypes, not multi-file application frameworks.
• AI-generated and imported documents must be complete HTML documents.
• Network-dependent assets do not load on the Canvas; use embedded/data assets when needed.
• Files above the local processing boundary or extremely complex documents may open read-only.
• Complex nested text markup is not destructively flattened by the text editor.
• AI results depend on the selected Provider and remain subject to its availability, policy, quota, and price.

Development

Node.js 24 or newer is recommended for building from source.

git clone https://github.com/WangHexinyi/framewright.git
cd framewright
npm ci
npm run build
npm run test
npm run package

Useful checks:

npm run lint
npm run test:writeback
npm run test:preview
npm run test:free-edit:chromium
npm run audit:architecture
npm run audit:writeback
npm run audit:package-content

Documentation

• Getting started
• Architecture
• Security
• Contributing
• Changelog

License

MIT