Framewright

简体中文

Run and visually edit front-end projects in one browser session—without giving up the source.

Framewright is a VS Code extension with a browser-first modernization candidate. Its isolated Browser Runtime runs HTML/CSS/JavaScript projects and approved development servers. High-confidence visual edits become minimal changes in native VS Code documents.

Workspace files are persistent source truth; the live browser DOM is visual truth. Rendering a page does not imply every element is source-editable.

Browser Runtime is currently opt-in (framewright.browserRuntime.enabled). Run, Inspect, and Edit share one persistent iframe. The legacy sanitized preview is a migration fallback, not a second concurrent canvas. These repository capabilities do not imply Marketplace publication or user acceptance.

Expressions, ambiguous mappings, framework scoped/compiled style rules and unreadable cross-origin stylesheets are not guessed. See the frozen acceptance matrix for evidence and pending gates.

Install from Marketplace · Download the VSIX · 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

Open Framewright in the Visual Studio Marketplace, or:

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.2.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 import makes no Provider call. Structural/size validation accepts ordinary scripts, modules and local resources; import is not permission to execute them. Browser Runtime separately requests execution permission in a trusted workspace. Preserve relative asset layout when saving an imported copy; opening the original project entry is preferable for multi-file projects. The legacy fallback remains script-free.

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.
• Browser Runtime uses a separate origin, sandbox and resource CSP. Local Only is the default; HTTPS resources and project-defined networking require explicit permission. The legacy fallback remains network-disabled.
• Native documents remain authoritative. WritebackService validates targets, sessions, generations, versions, hashes and ranges; project pages cannot write files.

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

• Framework editing covers a conservative literal subset, not arbitrary application structure. Complex changes require source editing or a separately reviewed proposal.
• AI-generated and imported documents must be complete HTML documents.
• Local Only blocks remote resources. Dev-server code executes with your user permissions after confirmation; browser CSP is not an OS process sandbox.
• 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