Restyle any webpage with words.
Select it. Describe it. Preview it safely. Keep it across visits.
简体中文 · Quick start · Privacy · Contributing
Open source · Local-first · No account · BYO model · Chrome Web Store coming soon
WebMeld is a lightweight Chromium extension for personalizing the web with natural language. Point at a real DOM element, describe the result you want, and WebMeld turns the request into a constrained CSS patch. Every patch is previewed against the live page, checked against its computed styles, and saved only after you approve it.
It works without Stylus, without an account, and without a WebMeld backend.
Sharing WebMeld? Use the outcome-first 14-second social clip or its poster.
| Point, don't inspect | Hover to reveal the exact element, selector, dimensions, and HTML context. |
| Use plain language | Ask for a larger title, calmer colors, a narrower reading column, or a hidden distraction. |
| Bring your own model | Connect any OpenAI-compatible Chat Completions endpoint with URL, model name, and key. |
| Preview before writing | Changes are rendered temporarily and accepted only after a real computed-style difference is detected. |
| Fail safely | Invalid, unsafe, ineffective, or directionally wrong CSS is rejected and removed automatically. |
| Keep your web yours | Approved rules live in local Chrome storage, survive refreshes, support undo, and export as UserCSS. |
The model never receives permission to execute JavaScript or directly edit the DOM. It may only propose CSS declarations. WebMeld owns selector generation, sanitization, preview, verification, persistence, and rollback.
What would you restyle with WebMeld? Share a before/after, the instruction you used, or a case where verification failed in Show and tell discussion #2. Honest failures are as useful as polished redesigns.
Please never post private URLs, API keys, or sensitive page content.
WebMeld is currently distributed as an unpacked extension while the Chrome Web Store release is prepared.
- Download or clone this repository.
- Open
chrome://extensionsin Chrome or another Chromium browser. - Enable Developer mode.
- Click Load unpacked and choose this repository directory.
- Open any
http://orhttps://page and click the WebMeld toolbar icon. - Click Select page element, choose a target, describe the change, and preview it.
The keyboard shortcut is Alt+Shift+M.
python3 -m http.server 8765Then open http://localhost:8765/demo-page.html.
WebMeld works out of the box with a small local rules engine. For open-ended requests, open Agent settings and provide:
- URL — a complete OpenAI-compatible
POST /chat/completionsendpoint; - Model — the model identifier expected by your provider;
- Key — the corresponding bearer token.
Use Test connection before saving. Requests go directly from the extension service worker to the endpoint you enter; they do not pass through a WebMeld server.
When generating a suggestion, WebMeld sends the selected element's page URL and title, selector, short text and HTML excerpts, dimensions, selected computed styles, and your instruction. Review PRIVACY.md before connecting a third-party model to sensitive pages.
WebMeld treats model output as untrusted input:
- accepts JSON with a bounded list of CSS declarations only;
- rejects selectors, style tags, JavaScript,
url(),@import, expressions, and unsafe bindings; - requires concrete pixel values for model-generated font-size changes;
- compares computed styles before and after preview;
- checks whether “larger” and “smaller” requests moved in the correct direction;
- rolls back when preview, apply, or local persistence fails.
See docs/ARCHITECTURE.md for the complete data flow and trust boundaries.
WebMeld's runtime is roughly 1,300 lines of plain JavaScript and CSS. There is no framework, bundler, production dependency, account system, or hosted service. That makes the extension quick to load and its security-sensitive behavior practical to audit.
.
├── assets/ Brand, icons, and demo media
├── docs/ Architecture, brand, and product notes
├── scripts/ Validation and release packaging
├── background.js Model client and service worker
├── content.js Selection, UI, preview, verification, persistence
├── content.css On-page selection overlay
├── demo-page.html Local playground
└── manifest.json Chromium extension manifest
No install step is required for the extension itself. Node.js is only used for repository checks and packaging.
npm run check
npm run packageThe package command creates a review-ready ZIP under dist/ and excludes repository-only files.
WebMeld 0.1.1 is an early public preview. The core editing loop is complete: select → describe → preview → verify → apply → undo → persist.
The next exploration is not a larger pile of CSS commands. It is using this verified live-page editing layer to bridge design intent and production interfaces.
Bug reports, model compatibility notes, design ideas, and focused pull requests are welcome. Start with CONTRIBUTING.md and please read SECURITY.md before reporting a vulnerability.
MIT © 2026 MicroMilo