> ## 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.
# Getting started tutorial
> Follow a complete walkthrough of Lunagraph, from the canvas to round-trip editing.
export const seek = (videoId, seconds) => event => {
const frame = typeof document !== "undefined" && document.getElementById(videoId);
if (!frame || !frame.contentWindow) return;
event.preventDefault();
frame.contentWindow.postMessage(`{"event":"command","func":"seekTo","args":[${seconds}, true]}`, "*");
frame.contentWindow.postMessage(`{"event":"command","func":"playVideo","args":[]}`, "*");
frame.scrollIntoView({
behavior: "smooth",
block: "start"
});
};
Follow this walkthrough for a complete tour of Lunagraph.
## In this walkthrough
1. [Learn the canvas](#part-1-learn-the-canvas)
2. [Connect your codebase](#part-2-connect-your-codebase)
3. [Designing with your components](#part-3-designing-with-your-components)
4. [Explore more workflows](#part-4-explore-more-workflows)
## Part 1: Learn the canvas
## Part 2: Connect your codebase
## Part 3: Designing with your components
## Part 4: Explore more workflows
### Chapters
* **7:25** Pull real screens from your codebase
* **8:11** Capture live UI with the Chrome extension
* **9:01** Build components developers can use
* **11:06** Tune creative components with custom controls
* **12:15** Edit a component and save it back
* **13:42** Build and share clickable prototypes
* **14:40** Use MCP, GitHub, and developer handoff
* **15:48** Preview localhost on the canvas
* **16:38** Wrap up
## Pull real screens from your codebase
Watch from 7:25
Connect local codebases to the chat, then ask the AI to bring existing UI onto the canvas. This helps you compare real product patterns, find inconsistencies, and reuse existing work while you design.
## Capture live UI with the Chrome extension
Watch from 8:11
Use the Chrome extension to capture an existing page and paste it onto the canvas. Turn on **Capture components** when you capture your own product. Lunagraph can then preserve recognized components and their props instead of flattening them into plain elements.
Learn more in [Capture a webpage with the Chrome extension](/docs/guides/chrome-extension-snapshot).
## Build components developers can use
Watch from 9:01
Design components around the data structure your product needs. Ask developers for the expected TypeScript props, then use the chat to turn your design into a component that supports every required state.
You can test those states through the properties panel while developers receive a component with the interface they need.
## Tune components with custom controls
Watch from 11:06
Expose props for creative values such as blur, noise, bleed, animation timing, and particle effects. Lunagraph turns those props into controls that you can tune visually.
Learn more in [Custom controls](/docs/guides/custom-controls).
## Edit a component and save it back
Watch from 12:15
Right-click a component and choose **Edit component** to open its internal layers. Change its styling or structure, paste other elements inside it, then choose **Save** to update the component.
Use **Save with instructions** when the change needs additional logic or context from the AI. Learn more in [Edit a component](/docs/guides/edit-component).
## Build and share clickable prototypes
Watch from 13:42
Ask the chat to connect your screens into an interactive prototype. Because the prototype uses real components, people can click, type, and interact with it in a browser.
Create a share link when you are ready for feedback. Learn more in [Send a prototype link](/docs/guides/send-a-prototype-link).
## Use MCP, GitHub, and developer handoff
Watch from 14:40
Use Lunagraph's MCP with coding agents outside the built-in chat. You can also connect GitHub to pull and push repository changes.
Developers can open a shared design, select an element, and copy its code. They can also ask a connected coding agent to retrieve a specific page or component from a Lunagraph project.
## Preview localhost on the canvas
Watch from 15:48
Insert a live preview of your local application onto the canvas. Compare several viewports at once and interact with the page while you implement the design.
This completes the round-trip editing workflow: design with code, implement in your codebase, and review the live result on the canvas.
## Wrap up
Watch from 16:38
You are ready to combine the canvas, your design system, AI assistance, prototypes, and live implementation in one workflow.