Easel

The OG image
The Editor image
The canvas image for mobile ui
The canvas image for desktop ui

Inspiration

i really like figma. its where i think. what i never liked is the labour after: turning frames into real components, matching spacing by hand, rewriting the same button four times. design and code were always two things.

webmcp made me ask a different question. if a page can hand its tools to any agent, what if the canvas itself was real html and css, and the agent edited it node by node in the same document as me? no handoff. the design is the code.

What it does

easel is a design canvas in the browser where every node is a real html element. you draw, drag, restyle, comment and export like a normal tool.

the page registers 30 webmcp tools on document.modelContext. open easels.dev in chatgpts browser and the agent can read the document, generate a page or a phone screen from a sentence, draw a logo and put it in the header, change colours across every node, leave comments, and export react or tailwind. a cursor moves on the canvas while it works.

How we built it

react, tailwind and zustand for the canvas. vercel functions, neon and clerk behind it. gpt 5.6 writes and edits html, a small model picks the closest of 24 real reference sites we flattened and debranded, and the page lands as a skeleton that gets rewritten live. quiver arrow draws the vectors.

Challenges we ran into

streaming html into a live tree without breaking on svg. agents that ignored our generate tool and hand wrote 8k characters of html, fixed by rewriting the tool descriptions and making write_html refuse anything bigger than one component. black logos, because our sanitiser stripped the style block arrow uses for colour.

Accomplishments that we're proud of

the whole demo runs from chatgpts sidebar with nothing typed into easel. a reference page lands in five seconds and is adapted in under thirty. two agents, browser and terminal, edit the same file with the same tools.

What we learned

tool descriptions are the product. an agent reads them like docs and does exactly what they say. and good design is mostly structure: a real reference with new words beats a model inventing a layout.

What's next for Easel

dashboard and mobile references, multiplayer cursors for people, and a component system so an agent can say "use the primary button" instead of restyling one.