Open source, MIT licensed

Shape the page.
Keep the code.

Edityy puts a visual editor on the site you already run. Point at an element. Change the type, the colour, the spacing and the fill. Then hand the edits to your code.

npm install -D edityy

One line of config for Vite, Express or Next.js.

Setup guide and full detailsView the source

How it works

One install, then the page answers to you.

  1. 01

    Install Edityy

    Add the plugin to your dev server. A launcher appears in the bottom-right corner of the page you already run.

  2. 02

    Point and edit

    Pick an element. The dock changes its type, colour, spacing, fill, border and shadow. Each edit is one inline style.

  3. 03

    Hand over the edits

    Copy the edits as a prompt, save them to the project, or let an agent read them over MCP. Your code does the rest.

What you can change

The whole page, in the browser you already have open.

  • Edit the page

    Select text, a container or media. Type new words. Change typography, colour, spacing and box styles.

  • Arrange elements

    Add, move and delete elements. Shift-click siblings and press Shift+A for a column.

  • Undo with trust

    Undo and redo style changes. Review each edit, select its element, or revert it before you leave the mode.

  • Use your own fonts

    Search the fonts already on the page, or browse Google Fonts. Edityy loads a face only when you preview or pick it.

  • Hand changes to code

    Copy the edits as a prompt, or save them to your project. The source code stays the source of truth.

  • Work with your agent

    The Edityy MCP server shares saved changes with coding agents such as Claude Code and Cursor.

Hand-off

Your code stays the source of truth.

Edityy does not write to your source. It writes down what you changed. Your agent makes the change in the file, in the way the project already styles things.

  • Copy the edits

    Paste them into your agent as a prompt. Each edit names its selector, its source line and each value.

  • Save to the project

    The edits land in .edityy/changes.json, in the folder your project already has.

  • Read over MCP

    Run npx edityy mcp and the agent reads the same file, with no copy and no paste.

Ready when your dev server is.

Install the package, add one line, and reload the page. The launcher is in the bottom-right corner.

npm install -D edityy