Learn Hyde

Everything you need to go from a sentence to a live app, with the details for when you want to go deeper.

Getting started

Hyde turns a description into a working React and Tailwind app that you can preview, edit and publish. You do not need to install anything.

1. Create a project

Type what you want in the prompt box on the home page or your dashboard and press Enter. Hyde writes the first version, usually in under a minute, and opens the editor with a live preview on the right.

2. Iterate in chat

Ask for changes the way you would brief a colleague: “Make the hero darker and add a testimonials section.” Hyde reads the relevant files, edits them and checks the app for errors. Every run creates a version you can restore.

3. Publish

Click Publish in the top bar to get a public URL on a Hyde subdomain. Connect a custom domain whenever you are ready.

Free plan
Every workspace receives five credits per day for free, which is enough to build and iterate on a small project. Paid plans add a monthly allowance with rollover.

Prompting guide

Hyde is good at understanding intent, but clear prompts get you to the result in fewer credits.

Be specific about the outcome

  • Weak: make it better
  • Strong: Increase the hero headline to 64px, use a warm orange accent and add a two-button CTA

One change at a time

Large prompts that touch many pages are harder to verify. Break work into steps: structure first, then content, then polish. Each step is one credit and gives you a restore point.

Give Hyde context

Attach screenshots, paste reference copy, or add a Knowledge document in project settings with your brand voice and constraints. Hyde includes it in every request.

Use the Improve prompt button

Not sure how to phrase something? Type a rough version and click Improve prompt. Hyde rewrites it with the details it needs. This does not cost credits.

Example prompt
“Build a booking page for a yoga studio. Weekly schedule grid, class detail modal, a booking form that saves to a Hyde Cloud entity called bookings, and a confirmation screen. Calm, natural palette with lots of whitespace.”

Chat vs Plan mode

Agent mode

The default. Hyde reads and edits files, adds dependencies, runs checks and summarizes what changed. Use it whenever you want something built.

Plan mode

Hyde discusses, reviews and plans without touching code. Ask it to outline an architecture, compare approaches or review the current implementation. When you are happy, switch to Agent mode and say “do it”.

Models

Pick a model from the picker next to the mode switch. Balanced models are fast and cheap for small edits. Powerful models reason better on large refactors. Credits are charged per message, not per token.

Tool steps

Each assistant message shows the tools it used: reading files, writing files, searching, adding packages and checking runtime errors. Expand a step to see the exact diff.

Visual edits

Toggle Edit in the preview toolbar, then hover and click any element. A panel shows its text and Tailwind classes grouped by typography, color, spacing and layout.

  • Text edits are applied directly to the JSX source.
  • Class changes are merged into the element's className.
  • Changes create a lightweight version and never cost credits.
  • Select an element and press Edit this element to send it to chat as context for a bigger change.
How it works
Hyde tags every JSX element with a stable id at build time, so edits in the preview map back to the exact line in your source.

Hyde Cloud

Hyde Cloud is enabled per project from Settings, Cloud. Once enabled, your app can import a typed SDK with no keys to manage.

import { hyde } from "@/lib/hyde";

const todos = hyde.entities("todos");
await todos.create({ title: "Buy milk", done: false });
const open = await todos.list({ where: { done: false }, orderBy: "-created_at" });

await hyde.auth.signUp("ana@example.com", "secret123", "Ana");
const me = await hyde.auth.me();

const file = await hyde.files.upload(input.files[0]);
await hyde.email.send("ana@example.com", "Welcome", "<p>Hi Ana</p>");
const { text } = await hyde.ai.generate("Summarize this: ...");

Entities

Schemaless collections with create, list, get, update and remove. Filter with where, sort with orderBy, page with limit and offset. Access rules per collection control who can read and write.

End-user auth

Email and password accounts for the users of your app, separate from your Hyde account. Sessions are stored in the browser and sent automatically.

Data browser

Open the Cloud tab in the editor to inspect and edit records, manage users and read logs for email and LLM calls.

Publishing and custom domains

Publish

Click Publish, choose a slug and confirm. Hyde bundles the current version and serves it from a global edge cache. Publishing again updates the live site; unpublish takes it down instantly.

SEO and sharing

Set a title, description and social image in the Publish dialog. You can also hide the Hyde badge on paid plans and protect the site with a password.

Custom domains

  • Add your domain in the Publish dialog, Domains tab.
  • Create a CNAME record pointing to the host Hyde shows you, plus a TXT record with the verification token.
  • Click Verify. Certificates are issued automatically once DNS resolves.

Analytics

Every published site reports page views and unique visitors by day. Open the Analytics tab in the Publish dialog to see the last 30 days.

GitHub sync

Connect GitHub from Project Settings, Connectors. Hyde can create a new repository or push to an existing one.

  • Every version is pushed as a commit with a descriptive message.
  • Commits made outside Hyde are pulled in through a webhook and become a new version.
  • Conflicts are rare because Hyde always works from the latest commit, but if one happens you choose which side wins.
Own your code
You can also download the whole project as a zip at any time from the project menu. The output is a standard Vite app.

Credits and plans

Credits are the unit of work in Hyde. One message in Agent or Plan mode uses one credit. Try to fix uses one credit. Improve prompt, visual edits and security scans are free.

Refills

  • Free: five credits every day, up to thirty in a month.
  • Pro and Business: a monthly allowance you choose with the credit slider, plus five daily credits. Unused monthly credits roll over while subscribed.
  • Top-ups: buy extra credits on any plan, Free included. They never expire. 1 credit = 1 message.

Managing billing

Open Settings, Billing to change plans, adjust credits, buy top-ups and download invoices through the Stripe portal.

Troubleshooting

The preview shows an error

Click Try to fix. Hyde reads the runtime error and the stack trace and patches the code. If the error persists, open History and restore the last working version.

Hyde changed the wrong thing

Use Restore on the message before the change, then rephrase with more context, or select the element in the preview and use Edit this element.

My published site is out of date

Publishing is a snapshot. Click Publish again to push the latest version. Browser caches clear within a minute.

I ran out of credits

Free credits refill daily. Any workspace can buy a top-up from the billing page in a few seconds.

Still stuck?

Email support.projecthyde@pixelverse.tech with the project link and a description of the issue. Include the version number from History when relevant.

Ready to build?

Start a project from a prompt or a template. It is free.