Getting Started

Sign Up

Go to your LiveFolio instance and create an account. You'll land on the dashboard — your workspace hub.

The Dashboard

The dashboard shows:

• All your folios with titles, descriptions, and timestamps
• Quick actions: create new, open in studio, share, delete
• Version counts and open comment counts per folio
• Access to Settings, API Keys, and Integrations

Create Your First Folio

Click "New Folio" to open the studio editor. You can:

• Write or paste HTML, CSS, and JavaScript
• Preview in real-time
• Choose a project mode
• Apply design system themes, palettes, and typography

Project Modes

Mode	Use Case	Layout
Document	Articles, reports, guides	Vertical scroll with sidebar
Deck	Presentations, slide decks	Horizontal panels + keyboard nav
Spreadsheet	Tables, calculators	Grid with formula support
Dashboard	Metrics, KPIs, charts	Card-based with visualizations

Publish

Click "Publish" to save your folio. Each publish:

• Creates a new immutable version
• Generates a shareable URL
• Makes the folio available for feedback

You can continue editing — changes won't affect the published version until you publish again.

The Studio Editor

The studio (/studio/[id]) is where you build folios:

• HTML editor with live preview
• Project mode selector — document, deck, spreadsheet, dashboard
• Design system picker — theme, palette, typography
• Reference files — upload documents for AI context
• Chat panel — ask the AI assistant to modify your folio

Connect Your AI Agent

LiveFolio is built for AI agents. Your coding assistant can publish folios directly:

1. Go to Settings → API Keys and generate an agent key
2. Add the MCP server to your agent's config (one-click from the Integrations page)
3. Ask your agent to "create a LiveFolio project" — it handles the rest

{
  "mcpServers": {
    "livefolio": {
      "url": "https://livefolio.cloud/api/mcp",
      "transport": "sse",
      "headers": {
        "Authorization": "Bearer lf_agent_xxxxxxxxxxxx"
      }
    }
  }
}

Next Steps

• Share your folio
• Set up integrations — MCP, Slack, Discord
• Learn about versioning
• Explore design systems