The Complete Guide

F1Getting Started & the Editor

From signing up to knowing where every button on the screen is.

Sign up & log in

1. Open the rakit.io home page and click Sign up. Fill in a username, email and password — or choose Continue with Google.
2. Right after signing up, your first website is live at yourname.rakit.io and the editor opens automatically.
3. New accounts get a one-time AI credit bonus, plus free credits every day (see Credits & Plans).

Two editor layouts: Simple & Coding

Choose with the switch at the top center. Your choice is remembered in the browser.

Screen map (Coding layout)

Avatar menu (top right corner)

F2Projects — Many Websites in One Account

Each project is a separate website with its own address, files, database, version history and AI conversations.

F3Files, Folders & Images

Every part of your website is stored as a file in the left panel. index.html is the home page.

Using images on a page

Click an image in the file panel to view it (pixel & file size), then copy its path, the <img> tag, or the CSS url().

<img src="/images/logo.png" alt="Bakery logo">

.hero { background-image: url('/images/hero.jpg'); }

F4Code Editor

A VS Code-style editor for changing HTML, CSS and JavaScript directly.

📖 Code Walkthrough — the AI explains your code (free)

The Code Walkthrough button above the editor (for .html, .css and .js files) opens an explanation panel next to the editor. The AI explains the code in the order it runs, not line by line.

1. Open a file and click Code Walkthrough. Wait while the AI puts the steps together.
2. Each step has a title, a kind (start, decision, loop, waiting for action, request…), the lines involved, an explanation, a real-value example, and key terms (click one to see its meaning).
3. Click a step → its lines are highlighted in the editor. Click a line in the editor → its step opens. Use the ‹ › buttons, ▶ (autoplay), or the arrow keys.
4. Steps that refer to another file (a page, a CSS class, an /api/fn/… function) can be clicked to open it, then ← Back.
5. Also see the flow diagram, notes (bugs, needs checking, suggestions) and code speed. Use Ask the AI to ask about the open step.

F5Preview, Select Blocks & Edit

See your website the way visitors do, at different screen sizes.

🎯 Select blocks — change only specific parts

Instead of describing “the part below the second heading…”, point at it directly in the preview.

1. Click Select blocks above the preview.
2. Hover over the page, then click the part you want to change (max. 5 blocks, across several pages if you like — change pages with the links in the preview).
3. Click Write instruction. The selected blocks appear above the AI box.
4. Write the change, e.g. “make it 3 columns and add icons”, then send. The AI focuses on those blocks and leaves the rest alone.
5. Click Done to leave selection mode.

✏️ Edit — change text & images right in the preview

For changing headings, paragraphs, button labels, list items or images without opening the code and without using AI credits.

1. Click Edit above the preview.
2. Hover over the page — editable text gets a blue box — then click the text and type.
3. Press Enter or click elsewhere to save. Esc cancels.
4. Click Done to leave edit mode.

The change is written to that page's HTML file (e.g. index.html) at exactly the same spot — formatting such as bold or links inside the text is kept. The file also opens in the Code tab, so you can undo with Ctrl/⌘ Z. Text written by JavaScript (e.g. the message 'Password must be at least 6 characters.' in script.js) can be changed too — the string is replaced in that JS file. Text assembled from data (e.g. “You've clicked 3 times”) can't: clicking it shows a red marker, so change it in the code or ask the AI. To change pages: Alt+click a link.

Replacing images: in Edit mode, click the image. Pick another image from the project, click Upload a new image…, or paste an image address (https://…). Also fill in the alt text — a short description of the image for screen readers and search engines — then Save. Only <img> images can be replaced here; CSS background images and <picture> images with several versions are changed in the code or with the AI.

F6AI Assistant (Builder & Plan)

Open the AI tab or press Ctrl/⌘ I. Prompt-writing techniques are in Part 2.

Prompt box features

Conversations & history

• 🕘 Conversation history (clock icon): open an old conversation to continue it.
• ↻ New conversation: start a new topic. The AI doesn't carry over the previous chat, so it's cheaper and more focused.
• 🗑 Delete all history: deletes every conversation in this project.
• History is stored on the server (max. 50 conversations, deleted after 90 days of inactivity).

“✦ … with AI” buttons in other features

Many features have a ✦ button that fills the AI box with a request plus its context (it isn't sent right away):

F7Database (Data Tab)

Store visitor data & content permanently — like a spreadsheet, ready to use from your web pages.

Creating a table

1. Open the Data tab and click + (New table) or + Create table.
2. Enter a table name (e.g. messages), then add columns: a name, a type, tick Required if it must be filled, and Private if visitors must not see it.
3. Click Create table. The id and created_at columns are created automatically.

Column types

Access: who may do what

Click Settings on a table. Each operation can be Public (every visitor) or Only you (the owner, through the editor). By default everything is Only you.

Private columns are never sent to visitors even when list is public — good for emails, phone numbers and addresses.

Managing table contents

• + Row adds data by hand. Double-click a cell to edit it. The trash icon deletes a row.
• Image columns show a thumbnail; double-click to upload, replace or clear it (you can also paste an https://… address).
• Lots of data is split into pages — use the Previous / Next buttons.
• The Use on your website section shows ready-to-copy example code (reading, adding, updating, deleting, handling errors) and flags access that isn't public yet.
• Delete table is in the table settings — click once more to confirm.

Using the database from your website code

// save
const res = await fetch('/api/db/messages', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name, message }),
});
if (!res.ok) alert((await res.json()).error);

// show the 20 newest
const { rows } = await (await fetch('/api/db/messages?sort=-created_at&limit=20')).json();

const up = await fetch('/api/db/products/upload?column=image', { method: 'POST', body: fileInput.files[0] });
const { url } = await up.json();          // e.g. "/uploads/products/lx3k-9f2a.jpg"
await fetch('/api/db/products', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name, image: url }),
});

F8Serverless Functions (Backend)

JavaScript code that runs on the server, not in the visitor's browser — for secret API keys, calculations that mustn't be tampered with, notifications, or calling other services.

Creating & trying a function

1. Open the Functions tab and click + New function. Give it a name (lowercase letters, digits, - or _, max. 40), e.g. send-message.
2. The file functions/send-message.js is created with example code. Click Open code to change it.
3. Click Try: choose a method, fill in the query & JSON body, then run it. The result, status, time and console.log output appear right away.
4. Call it from your web pages at /api/fn/send-message. Copy URL copies the full address.

export default async function (req, { db, env, fetch, ai }) {
  // req: { method, query, headers, body }
  const row = await db.insert('orders', {
    name: req.body.name, total: 150000,
  });
  return { ok: true, id: row.id }; // sent as JSON
}

const res = await fetch('/api/fn/order', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Ani' }),
});
const data = await res.json();

What's available inside a function

Full reference

Ready-to-use code examples

Copy into functions/<name>.js, adjust the table/column names, then test with the Try button.

export default async function (req, { db, env, fetch }) {
  if (req.method !== 'POST') return Response.json({ error: 'Use POST' }, { status: 405 });

  const { name, email, message } = req.body || {};
  if (!name || !message) return Response.json({ error: 'Name and message are required' }, { status: 400 });

  // the "messages" table can stay "Only you": db in a function works as the owner
  const row = await db.insert('messages', { name, email, message });

  // secrets: TELEGRAM_TOKEN & TELEGRAM_CHAT_ID (Functions tab → Secrets)
  const tg = await fetch(`https://api.telegram.org/bot${env.TELEGRAM_TOKEN}/sendMessage`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: { chat_id: env.TELEGRAM_CHAT_ID, text: `New message from ${name}:\n${message}` },
  });
  if (!tg.ok) console.warn('Telegram failed', tg.status, await tg.text());

  return { ok: true, id: row.id };
}

export default async function (req, { db }) {
  const { name, phone, items } = req.body || {};   // items: [{ id: 3, qty: 2 }, …]
  if (!Array.isArray(items) || !items.length) {
    return Response.json({ error: 'Your cart is empty' }, { status: 400 });
  }

  let total = 0;
  const lines = [];
  for (const it of items) {
    const p = await db.get('products', it.id);         // the price comes from the database, not the browser
    const qty = Math.max(1, Math.min(99, Number(it.qty) || 1));
    if (p.stock < qty) return Response.json({ error: `Not enough ${p.name} in stock` }, { status: 409 });
    total += p.price * qty;
    lines.push(`${p.name} x${qty}`);
    await db.update('products', p.id, { stock: p.stock - qty });
  }

  const order = await db.insert('orders', { name, phone, items: lines.join(', '), total, status: 'new' });
  return { ok: true, number: order.id, total };
}

export default async function (req, { env, fetch }) {
  const city = req.query.city || 'Jakarta';
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(city)}`
            + `&units=metric&lang=en&appid=${env.OWM_KEY}`;
  const res = await fetch(url);
  if (!res.ok) return Response.json({ error: 'Weather data unavailable' }, { status: 502 });

  const d = await res.json();
  return Response.json(
    { city: d.name, temp: d.main.temp, weather: d.weather[0].description },
    { headers: { 'cache-control': 'public, max-age=600' } },   // cache for 10 minutes
  );
}
// called from a page: fetch('/api/fn/weather?city=Bandung')

export default async function (req, { db, env }) {
  // a simple key for a private admin page (secret ADMIN_KEY)
  if (req.headers['x-admin-key'] !== env.ADMIN_KEY) {
    return Response.json({ error: 'Not allowed' }, { status: 401 });
  }

  switch (req.method) {
    case 'GET':
      return db.list('orders', { sort: '-created_at', limit: 50, filter: req.query.status ? { status: req.query.status } : {} });
    case 'PATCH':
      return db.update('orders', req.query.id, { status: req.body.status });
    case 'DELETE':
      return db.delete('orders', req.query.id);
    default:
      return Response.json({ error: 'Method not supported' }, { status: 405 });
  }
}
// from a page: fetch('/api/fn/admin-orders?status=new', { headers: { 'X-Admin-Key': key } })

export default async function (req, { db, env, fetch }) {
  if (req.method !== 'CRON') return Response.json({ error: 'Schedules only' }, { status: 403 });

  const since = Date.now() - 24 * 3600e3;                      // the last 24 hours (created_at is in UTC)
  const today = new Date(Date.now() + 7 * 3600e3).toISOString().slice(0, 10);   // WIB date for the title
  const { rows } = await db.list('orders', { sort: '-created_at', limit: 100 });
  const fresh = rows.filter((r) => Date.parse(r.created_at) >= since);
  const revenue = fresh.reduce((n, r) => n + (r.total || 0), 0);

  console.log(`Report ${today}: ${fresh.length} orders, Rp${revenue}`);
  await fetch('https://api.resend.com/emails', {                 // send an email via Resend
    method: 'POST',
    headers: { Authorization: `Bearer ${env.RESEND_KEY}`, 'Content-Type': 'application/json' },
    body: { from: 'shop@yourdomain.com', to: env.MY_EMAIL, subject: `Report ${today}`,
            html: `<p>${fresh.length} orders, total Rp${revenue}</p>` },
  });
}
// set it in the Functions tab → Schedule → "Every day at 21:00"

export default async function (req, { db, env }) {
  if (req.query.key !== env.ADMIN_KEY) return Response.redirect('/', 302);   // not the owner → home page

  const { rows } = await db.list('signups', { sort: 'id', limit: 100 });
  const csv = ['id,name,email', ...rows.map((r) => `${r.id},"${r.name}","${r.email}"`)].join('\n');
  return new Response(csv, {
    headers: {
      'content-type': 'text/csv; charset=utf-8',
      'content-disposition': 'attachment; filename="signups.csv"',
    },
  });
}

export default async function (req, { ai }) {
  const history = (req.body?.messages || []).slice(-10);      // [{ role: 'user'|'assistant', content }]
  const { text } = await ai.chat({
    system: "You are the support agent for Sari's Bakery. Open 8 am–8 pm. Answer briefly & kindly.",
    messages: history,
    maxTokens: 400,
  });
  return { reply: text };
}

async function send(data) {
  const res = await fetch('/api/fn/contact', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });
  const result = await res.json().catch(() => ({}));
  if (!res.ok) throw new Error(result.error || 'Sending failed');   // the message from Response.json({ error })
  return result;
}

Secrets, schedules and logs

F9AI in Functions (AI Providers)

Build AI features into your website — chatbots, summaries, data extraction, image checks — using your own API key.

Adding a provider

1. Functions tab → the AI providers section → add a provider.
2. Choose a type: OpenAI, Anthropic Claude, Google Gemini, or OpenAI-compatible (with quick buttons for DeepSeek, Groq, OpenRouter, Mistral and Together).
3. Fill in a name (used in your code), the API key, a chat model, and an embedding model (optional). Mark one as the default.
4. Click Save & test to make sure the key and model work. Max. 10 providers per project.

export default async function (req, { ai }) {
  const { text } = await ai.chat(req.body.question, { system: 'You are a bakery support agent. Answer briefly.' });
  const data = await ai.json('Extract the name & phone from: ' + req.body.message, { name: 'string', phone: 'string' });
  const check = await ai.chat('Is this a payment receipt?', { images: ['/uploads/receipts/abc.jpg'] });
  const [a, b] = await ai.embed(['chocolate cake', 'brownies']);
  return { text, data, check: check.text, similar: ai.similarity(a, b) };
}

Limits: max. 5 ai.* calls per execution, 60 seconds per call, max. 4 images (5 MB). Time spent waiting for the AI doesn't count toward the function's 10-second limit. Usage per provider is shown in the Functions tab.

F10AI-Drawn Diagrams

The AI draws your website's structure from its files & database — to understand the big picture, for documentation, or for coursework.

1. Open the Diagram tab and choose a type.
2. Click Update diagram — the AI draws it from the current state (uses 1 credit, refunded on failure). The diagram is saved and doesn't change by itself.
3. Read the Findings panel: the AI's notes, such as tables anyone can delete or broken links.
4. If the drawing fails to display, click Fix with AI (free, max. 2 times per diagram).
5. Copy the Mermaid code or download it as SVG. The ⓘ button explains how to read the open diagram type.

Zoom & pan

F11Version History

A “save point” for all your project files. Experiment without fear of breaking things.

History doesn't count toward your storage quota.

F12Console — Finding the Cause of Errors

Every message from your website in one place. A red number on the tab means new errors.

• Filter by source, tick Errors only, or type in Search logs….
• The ↻ button reloads the preview, 🗑 clears the log.
• On an error line, click ✦ Fix with AI — the error message is sent along as context.

F13Publishing: Live or Dev/Prod

Control when visitors see your changes. Open the avatar menu → Publishing mode.

Publishing changes

1. A dot on the Publish button (top right) means there are changes that aren't live yet.
2. Click the button — you'll see the list of new, changed and deleted files, plus database structure changes.
3. Click Publish. Data & images submitted by visitors on the public website stay safe; dev test data isn't copied.
4. If a table/column will be deleted, tick the confirmation first — its data will be removed from the public website.

F14AI Credits, Plans & Payment

The credit badge in the AI panel shows your remaining credits. Click it, or open the avatar menu → Subscription & AI credits.

What does each feature cost?

Where credits come from (used in this order)

1. Subscription quota — if you subscribe to Pro/Unlimited.
2. The welcome bonus for new accounts (one-time), then daily free credits — reset at 00:00 WIB (UTC+7); leftovers don't accumulate.
3. Purchased credits — never expire.

Plans

Current prices and AI quotas are shown in the Subscription & AI credits menu.

Paying with QRIS

1. Choose a credit package or a subscription, then click pay.
2. Scan the QRIS code with any Indonesian banking or e-wallet app that supports QRIS.
3. Keep the payment window open — the credits/plan activate automatically as soon as the payment is received.

• 30-day subscriptions, paid once with no automatic billing.
• Renewing the same plan adds 30 days from its end date.
• Upgrading Pro → Unlimited: active immediately; the remaining Pro days are converted by price.
• When a subscription ends, limits go back to Free. Files aren't deleted, but new/larger files are rejected until usage is below the limits.

F15Settings & Keyboard Shortcuts

Avatar menu → Settings. Settings are saved in the browser you're using.

F16Common Problems & Fixes

Check here first before getting stuck.

1Basics — How the AI Works

Understand the two modes & three golden rules to get it right on the first try.

Three golden rules

2Structure & Pages

Deciding the files, pages and navigation.

3Design & Visual Style

How to describe colors, fonts and mood effectively.

4Responsive Design — Desktop / Mobile

How to ask for different layouts on phones and desktops, or lock to one of them.

Choose a direction

Desktop-only

The page is made for wide screens. Phone visitors see an “open on desktop” message.

Mobile-only

Designed for phones: big buttons, one column, bottom navigation.

Different behavior per screen size

If you want elements to appear/disappear or change shape at certain sizes:

Screen sizes (common breakpoints)

If you want to give exact numbers, use these as a reference:

5SEO & Social Sharing

So your site shows up on Google and looks great when its link is shared on WhatsApp/social media.

A complete SEO request

6Accessibility — Easy for Everyone to Use

Making your site comfortable for anyone, including screen reader users and people with visual impairments.

7Forms & Input Validation

A good form saves data neatly and tells visitors when something's wrong.

8Animation & Advanced Interaction

Dynamic touches that make your site feel alive — without getting in the way.

9Images, Media & Icons

How to ask for images, illustrations, maps, videos and icons without your own files.

10Navigation & Multiple Pages

Organizing many pages and the links between them neatly.

11Performance & Speed

A fast site is more pleasant to use and better liked by search engines.

12Content & Writing

The AI can write the text too — tell it who's reading.

13Security & Personal Data

Protecting visitors' data and keeping it from being misused.

14Third-Party Integrations (CDNs & Services)

Adding popular services through a CDN/link — no server of your own needed.

15Data Tables & Dashboards

Showing lots of data neatly, plus number summaries and charts.

16Advanced Prompt Patterns

Techniques for more precise results, especially on complex sites.

Step-by-step iteration (from plan to result)

Context + request

When the result isn't quite right

17Database — Save & Show Data

rakit's main strength: your site can save data without a server of your own. The AI creates the tables automatically.

Common patterns: pick the one you need

18Interaction & JavaScript Features

Dynamic behavior: filters, search, carts, calculators and more.

19Complete Prompt Examples (Ready to Use)

Just copy, adjust the names & details, and send it in Builder mode.

20Fixing & Changing

How to correct a result without starting from scratch.

21Limits & Technical Tips

What to know so you don't hit a wall.

★Universal Prompt Template

Copy it, fill in the parts inside [ ], then send.