# Tandmade

> Tandmade is a visual editor and an AI agent on top of real Astro code. Sites run on Cloudflare with their own database, media and forms.

## Getting started

- [Welcome to Tandmade](https://tandmade.com/docs/welcome.md): Tandmade is where you build websites in a visual editor on real code, with an agent that does the implementation work. Here is how the pieces fit together.
- [Create your first site](https://tandmade.com/docs/quickstart.md): Start a new site from the dashboard — from a Figma file, a live website, a blank page or a description for the agent — and open it in the editor.
- [Start from Figma](https://tandmade.com/docs/import-figma-or-url.md): Paste a Figma link and Tandmade proposes the site — pages, screen sizes, reusable parts and the design system. You check the plan, then the agent builds it.

## Editor

- [The editor at a glance](https://tandmade.com/docs/editor-tour.md): Four areas around your live site: the top bar, the left panel, the canvas and the inspector. What each one is for, and the keys that get you there.
- [Edit text and links](https://tandmade.com/docs/edit-in-place.md): Change text right on the canvas or in the inspector, set heading levels and point links to a page, a section or an address.
- [Images, video and embeds](https://tandmade.com/docs/images-and-media.md): Replace an image and describe it, keep the site's files in Assets, and add a video or a YouTube, Vimeo, Loom or map embed.
- [Keyboard shortcuts](https://tandmade.com/docs/keyboard-shortcuts.md): Every shortcut in the editor on one page, grouped by what you're doing.

## Design & style

- [Design system: colors, fonts, spacing](https://tandmade.com/docs/design-tokens.md): Set your site's colors, fonts, type scale, spacing, shapes, buttons and motion in one place. Change a value and every page follows.
- [Motion and interactions](https://tandmade.com/docs/interactions.md): See everything that moves an element, play it on the page, add motion from a catalog, and manage the interactions your whole site shares.

## Agent

- [Working with the agent](https://tandmade.com/docs/working-with-the-agent.md): Describe a change in plain words, check the agent's proposal and its code, then apply it or send it back.

## Content & forms

- [Collections and fields](https://tandmade.com/docs/collections.md): Create a collection for content you repeat — blog posts, case studies, team members — and choose the fields each item has.
- [Collection pages, filters and search](https://tandmade.com/docs/collection-pages.md): The list and item pages a collection gets, and the URL parameters that filter, sort, search and page through its items.
- [Build a form](https://tandmade.com/docs/forms.md): Add a form from the Add panel, put the fields you need in it, preview its sent and error states and send a test submission.

## Languages & SEO

- [Add a language and translate](https://tandmade.com/docs/languages.md): Add a language to the site, switch the preview between languages, and translate pages, page titles and content items.
- [Page SEO and social images](https://tandmade.com/docs/seo.md): See how a page looks in Google, then set its search title, description, visibility and the image shown when someone shares it.

## Publishing

- [Publish your site](https://tandmade.com/docs/publishing.md): See what changed since the last publish, check the site, then put it live on a review link or your own domain.

## Developers

- [Project structure](https://tandmade.com/docs/project-structure.md): Every Tandmade site is a standard Astro project. What lives where, which files are generated, and what is code versus data.