Show HN: Recto – A visual canvas for coding agents

A developer released Recto, a locally running visual canvas that lets coding agents such as Claude Code, Codex, Cursor and OpenCode build UI, motion and 3D work in a shared workspace. Recto automatically detects coding agents installed on a user's computer, runs their CLIs directly inside the app, and requires no MCP setup, API configuration or network round-trips between Recto and the agent, according to the project's Show HN post. Users can watch each agent edit files, change elements directly on the canvas, or reprompt, and can run multiple agents on the same design.

the visual canvas for coding agents build ui, motion and 3D with Claude Code, Codex, Cursor and more. recto runs locally, giving your coding agent a visual workspace to build in, while you see every change, edit anything directly, or simply reprompt. all without leaving recto. 02bring your agentsYour tools, in the same workspace. recto works with the tools you already use. recto automatically detects the coding agents installed on your computer. use their CLI directly inside recto. install another agent and it becomes available too. you can even work with multiple agents on the same design. no switching windows. no extra setup. Onda Overview Brand + 83% J Hero directionClaude Code · started just nowHero directionCodex · started just nowHero directionCursor · started just nowHero directionOpenCode · started just now Claude Code ~/onda ❯ Give this hero a warmer feel and more room to breathe. ✻ Thinking… ● Read pages/index.html ⎿ Read 86 lines ● Update pages/index.html ⎿ Added 2 lines, removed 2 − A new perspective. + A softer kind of everyday. ● A warmer headline, with more space around the hero. ✻ Worked for 12s ❯? for shortcuts OpenAI Codex directory: ~/onda › Give this hero a warmer feel and more room to breathe. • Working… • Explored Read pages/index.html • Edited pages/index.html − A new perspective. + A softer kind of everyday. • Updated the headline and hero spacing. ›? for shortcuts Cursor Agent ~/onda → Give this hero a warmer feel and more room to breathe. Thinking… Read pages/index.html Reviewing the hero styles. Edited pages/index.html − A new perspective. + A softer kind of everyday. The headline and spacing are updated. →? for shortcuts opencode Hero direction · ~/onda Give this hero a warmer feel and more room to breathe. Thinking… → Read pages/index.html ← Edit pages/index.html − A new perspective. + A softer kind of everyday. Updated the headline and spacing. Ready to review. ›? for shortcuts Desktop / index560Ask an agent ondaObjects About CONSIDERED OBJECTS. EVERYDAY JOY. A softer kind of everyday. Thoughtful objects for a life that looks a little more like you. Find your everyday Considered formEveryday ritualsA new perspective Real HTML. Still yours to edit. One shared projectNo MCP setup needed 03Local and fastDirectly on your computer. built locally. built for speed. recto and your coding agents work together directly on your computer. No MCP setup. No API configuration. No network round-trips between recto and your agent. just your agent, your canvas and your machine. fast by design. How it worksPrompt, edit, prompt again. from prompt to pixels. together. 01Connect Configure your coding agent with Recto. Agents2 ready Claude CodeReady CodexReady CursorSet up OpenCodeSet up 02Create Describe what you want and let your agent start building. Claude Code ~/onda ❯ A landing page for Onda. Considered objects, warm and quiet. ● Write pages/index.html ⎿ Wrote 86 lines ✻ Building the hero… ❯ 03Edit Change anything directly on the canvas. Desktop / index ondaObjects About CONSIDERED OBJECTS. EVERYDAY JOY. A softer kind of everyday. 116 × 48 Thoughtful objects for a life that looks a little more like you. 04Reprompt Select what you want improved and ask your agent to take it further. ondaObjects About CONSIDERED OBJECTS. EVERYDAY JOY. A softer kind of everyday. Thoughtful objects for a life that looks a little more like you. Find your everyday Ask an agent Warmer, with more room. Send to agent repeat until it feels right. 04An open canvasRoom for every direction. a canvas for every version of your idea. start with a direction. explore it with your agent. keep every variation side by side, then make the details your own. Onda Overview Brand + 83% J 01 / First thought560 ondaSTUDIO A NEW PERSPECTIVE Objects with another angle. Considered objects. Unexpected perspectives. Explore the collection ↗ 01 Considered form 02 Everyday rituals 03 A new perspective 02 / After hours560 ondaSTUDIO A NEW PERSPECTIVE A softer kind of everyday. Considered objects. Unexpected perspectives. Explore the collection ↗ 01 Considered form 02 Everyday rituals 03 A new perspective 03 / A fresh angle560 ondaSTUDIO A NEW PERSPECTIVE Made to stand apart. Considered objects. Unexpected perspectives. Explore the collection ↗ 01 Considered form 02 Everyday rituals 03 A new perspective 04 / Less, but better560 ondaSTUDIO A NEW PERSPECTIVE Objects with another angle. Considered objects. Unexpected perspectives. Explore the collection ↗ 01 Considered form 02 Everyday rituals 03 A new perspective 05 / New perspective560 ondaSTUDIO A NEW PERSPECTIVE A softer kind of everyday. Considered objects. Unexpected perspectives. Explore the collection ↗ 01 Considered form 02 Everyday rituals 03 A new perspective 06 / A new direction560 Exploring a new direction… ondaSTUDIO A NEW PERSPECTIVE A warmer way to live. Considered objects. Unexpected perspectives. Explore the collection ↗ 01 Considered form 02 Everyday rituals 03 A new perspective One idea, ready to explore.Claude Code · Thinking…● Write pages/warm-direction.html Claude Code · New design ready. 05Comments & handoffA conversation, right on the design. point to it. make it better. pin a comment to any part of your design. send it straight to your agent with the selected element and your feedback. see the change, right where you asked for it. 01 point to the detail use the comment tool and click the element. 02 leave your direction add your words, an image or a drawing. 03 send to your agent pass the comment and its context to the agent tab. watch your comment become a change. ondaObjects AboutOBJECTS FOR LIVINGGood things. Made simply.Your everyday. A little brighter.1Thoughtful forms. A little more you.Considered form. Everyday rituals. CommentHero headline You · just now Make this feel warmer and more personal. Keep thelayout as it is. AttachDrawDrawSend to agentSend to agentPost Claude Code · just now Updated the headline. Ready for your review. 06Ways to createAlongside the rest of your design. one canvas. more ways to create. 01 UI Design interfaces, websites, landing pages, dashboards and product experiences. Desktop / index onda Objects About A softer kind of everyday. Thoughtful objects for a life that looks a little more like you. Find your everyday 02 Motion Create interactions, transitions and animations with a visual timeline. 0s1s2s3s4s Loop Headline Camera 03 SVG Create and edit scalable graphics without leaving your workspace. 04 3D Build and experiment with 3D elements alongside the rest of your design. 07Web importBring a design from the web into Recto. copy anything. make it yours. found an interface you like? bring a design from the web into recto and start editing it. https://example.com⌘V example-com Imported ondaObjects About CONSIDERED OBJECTS. EVERYDAY JOY. A softer kind of everyday. 159 × 65 Thoughtful objects for a life that looks a little more like you. Find your everyday 01 Change the layout. 311 × 48 02 Restyle it. Fill 03 Animateit. Or let your agent take it somewhere completely different. Figma importcoming soon 08Design systemChange a token once. one design system. every design consistent. every recto project keeps its design system in one place: colours, type, spacing and components. your agent reads it before it designs. change a token once. every page follows. start from an included system, capture one from a website, or build your own with your agent. Plain CSS variables underneath. theme.css:root --color-surface: faf9f6; --color-ink: 29251f; --color-brand: e5a171; --font-display: Georgia, serif; --text-heading: 40px; --space-md: 24px; --radius-md: 12px; Desktop / index onda A softer kind of everyday. Find your everyday Desktop / objects onda Objects for slow mornings. See all objects Desktop / about onda Made slowly, by hand. Visit the studio 09How it worksWatch it build. Make it yours. everything happens here. real HTML & CSS underneath. <h3 Real HTML & CSS underneath.</h3 every recto design is built on HTML and CSS. that means what you create isn't trapped inside recto. 01 open recto your installed coding agents are detected automatically. 02 start prompting choose an agent and describe what you want to create. 03 watch it build see the design appear directly on the canvas. 04 make it yours Edit visually, select and reprompt, or continue working with your agent. 05 export take your HTML and CSS wherever you want. export it. use it. ship it. your design is already closer to production. 10Questions and answersEverything remains editable on the canvas. FAQ 01 What is Recto? Recto is a visual design canvas for coding agents. It lets you create UI, motion, SVG and 3D designs with agents such as Claude Code and Codex while keeping everything directly editable. 02 Is Recto an AI model? No. Recto works with the coding agents already installed on your computer instead of replacing them. 03 Which coding agents does Recto support? Recto automatically detects supported coding agents installed on your system and lets you use them directly inside Recto. You can also work with multiple agents. 04 Can I edit what my agent creates? Yes. Everything remains editable on the canvas. You can drag, resize, style, animate and modify elements directly, then continue prompting from where you left off. 05 Does Recto generate real code? Yes. Recto uses HTML and CSS underneath your designs, making them easy to export and use outside Recto. 06 Does Recto require MCP or an API? No. Recto works locally with your coding agents without requiring MCP, API configuration or additional network calls between Recto and the agent. 07 Can I import existing designs? You can bring designs from websites into Recto. Figma import is coming soon. 08 How much does Recto cost? Recto is free. 09 Which platforms are supported? Recto is available for Mac, Windows and Linux. 11Download RectoYou both design. Figma gave designers a canvas. coding agents need one too. 1050 × 208 recto brings visual control to the way software is being built now.