This guide walks you around Lunagraph: how to add things to the canvas, work with components, edit with AI, and a sneak peek of the design-to-code workflows we’ll cover in upcoming guides.Documentation Index
Fetch the complete documentation index at: https://lunagraph.com/docs/llms.txt
Use this file to discover all available pages before exploring further.
Video walkthrough
What you’ll learn
- 0:18 How Lunagraph’s canvas compares to Figma, and what makes it different
- 0:36 Adding HTML elements and components to the canvas
- 1:26 Creating your own components
- 1:47 Pasting code from the shadcn docs
- 2:47 Editing with the AI chat
- 3:32 A sneak peek at design-to-code workflows
A canvas made of code
Watch from 0:18 Lunagraph is a design canvas, much like Figma. Paste in inspiration, take notes, and use granular controls to create from scratch. The difference: everything you put on the canvas is real HTML, CSS, and React.Adding things to the canvas
Watch from 0:36 Use the Insert panel on the left to add any HTML element (like adiv) or a component. Lunagraph ships with shadcn components installed, and you can bring in your own custom components too. Components come with their props. For example, a shadcn Button exposes its variant so you can switch it to outline from the canvas.
You can also create your own components (1:26): right-click → Create component. It works like creating a component in Figma, except it actually produces a React component that’s added to your assets. Edit a component once and changes propagate across your canvas.
Pasting in code
Watch from 1:47 Because shadcn components are installed, you can copy example code straight from the shadcn docs, click on the canvas, and paste. The pasted UI is fully editable. Wrap things in a div with auto layout (Shift + A, like Figma), tweak Tailwind variables in the styles panel, or drop into the class field to write CSS or Tailwind directly.Editing with AI
Watch from 2:47 The chat lives on the left. To talk to it about something on your canvas, select it and press Cmd + L. That adds the selection as a reference in the chat. Then type what you want and send. Generated UI uses your installed shadcn components and lands as regular canvas elements, so you can fix small things or mix and match across variations after the fact.The chat is powered by Claude Code, which needs to be installed in your terminal. If you haven’t set it up yet, follow the Install Claude Code guide first.
Sneak peek: design-to-code workflows
Watch from 3:32 Upcoming guides go deeper, but here’s what’s possible:- Designing (3:39). Set up defaults (inputs, styles), duplicate one as a starting point, then select it, hit Cmd + L to reference it in the chat, and ask for the variation you want. The result matches your existing components and styles.
- Implementing (4:23). Give the chat access to your local folder. Select a screen, Cmd + L to reference it, and ask the chat to implement it in your codebase. Run your dev server and insert a Live Preview to see changes, including across viewports like mobile. The preview is interactive (scroll, click, etc.).
- Round-trip editing (5:01). Click Edit on a live preview to get an editable version of the rendered screen. Make changes by hand, see them tracked on the right, and Save to code to write them back to the right files in your codebase.
- Beyond UI (5:22). Animate elements on the canvas (hover states, transitions), build website graphics out of divs, or generate React components with props (like a dither shader) and tweak them live from the canvas.