LovableBeginner10 min read

Sample tour: every content block, in one tutorial

A live demo of every block the editor supports — code, terminal, prompts, file trees, API blocks, diffs, tabs, tables, callouts, and more.

LovableBuilderUpdated Jul 11, 2026

Welcome! This tutorial shows every content block the editor supports. Scroll through, and open it in the admin to see how each one is set up.

1. Prose, headings, and steps

Text blocks are the workhorse. Use headings to anchor sections and steps to walk readers through short procedures.

Open the admin panel

Create a new tutorial

Give it a title, choose a category, and start inserting blocks.

Publish when ready

Toggle Publish to make it visible on the public site.

2. Code, terminal, and prompts

Use code blocks for source snippets, terminal blocks for shell sessions, and prompt blocks for AI prompts your readers should copy.

src/greet.tstypescript

export function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet("world"));

Install and run

$npm install
$npm run dev
▲ Vite server ready on http://localhost:8080

Landing page prompt

Build a modern landing page for a task-management SaaS. Include a hero, three feature cards, a pricing table, and a footer. Use a dark theme with green accents.

Suggested project structure

src/greet.tstypescript

− Before

−export function greet(name) {
−  return "Hello, " + name;
−}

+ After

+export function greet(name: string): string {
+  return `Hello, ${name}!`;
+}

3. API requests and responses

Document endpoints with request and response blocks so readers can see exactly what to send and expect back.

GET/api/tutorials

List all published tutorials, most recent first.

Headers

Authorization:Bearer <token>

Accept:application/json

200application/json

A successful response returns an array of tutorial summaries.

[
  {
    "id": "a1b2c3",
    "slug": "getting-started",
    "title": "Getting started with Lovable",
    "category": "Lovable"
  }
]

4. Tabs, accordions, tables, checklists

npm install @tanstack/react-router npm run dev

Only if your app stores or reads persistent data. Static content sites can skip it entirely.

Block	Best used for	Copyable
Code	Source snippets	Yes
Terminal	Shell sessions	Yes
Prompt	AI prompts to reuse	Yes
API request	Documenting endpoints	Yes (cURL)

Pre-publish checklist

5. Callouts for every situation

Good to know

Callouts help you highlight things readers should not miss.

Quick tip

Keep callouts short — one or two sentences works best.

You did it

Use the success callout to celebrate milestones.

Heads up

Use warnings for things that will bite you if you skip them.

Do this

Store secrets in server-only env vars and never in client code.

Don't do this

Copying production keys into a public repository is the fastest way to leak them.

Security note

Enable Row Level Security on every public table and write policies before shipping.

Performance tip

Lazy-load heavy components and images below the fold to keep first paint fast.

6. Resources, downloads, and shortcuts

TanStack Router docs

Reference for routes, loaders, search params, and navigation.

Open →

Starter kit (ZIP)

A minimal starter project you can extend.

starter.zip·2.4 MB

Download

Editor shortcuts

Open command paletteCmd+K
Save draftCmd+S
Publish tutorialCmd+Shift+P

Simplicity is prerequisite for reliability.
— Edsger W. Dijkstra

That's every block. Duplicate this tutorial from the admin to reuse it as a template.