Getting Started with Rough

We’re going to connect Rough to your app so your users can build Features around the data they already work with. By the end, you’ll have a published Feature that can read your data, follow changes, and save updates through your app.

Choose Vanilla, React, or Svelte using the framework selector above. Each path covers the same six steps and reaches the same outcome. The React examples use Next.js App Router, and the Svelte examples use SvelteKit and Svelte 5. You can switch frameworks without losing your place. The Vanilla path uses TypeScript and browser APIs; follow it with Vue, Angular, Solid, or any framework that doesn’t have its own path here.

Before we start

This guide assumes you have an existing app with authentication, a server that can keep a private key secret, and browser-side access to some data the signed-in user is allowed to see. For the last two steps, you’ll also need a way to observe changes and an existing save operation.

We won’t build a login system, database, or demo backend here. Rough connects to the systems you already use. The SDK needs a modern browser and a bundler; direct CDN and script-tag usage aren’t supported.

Pick a small part of your app that users could usefully view, organise, and update—customers, orders, bookings, or support tickets, for example. We use books to keep the examples concrete, but you don’t need to create a books table, API, or store. Use your own data model and operations throughout.

Use your existing login

Your users won’t need a separate Rough login. In Connect your app, we’ll add a server endpoint that signs a short-lived token using your existing session. Your server keeps the signing key private; the browser only receives the token.

Work through the guide

1. Set up your project — install the packages and create a Rough project and signing key.
2. Connect your app — use your existing session to authenticate users with Rough.
3. Expose your data — describe your data and connect a Query to an existing read function.
4. Build your first Feature — open the Builder, publish a Feature, and display it using real app data.
5. Keep data up to date — connect a Subscription to your app’s data observer.
6. Let Features make changes — connect a Mutation to your existing save path.

Each step builds on the last and ends with something to check. The first four get a Feature working with your data; the last two let it follow and make changes.

Prefer to work with a coding agent? See Set up with your agent.