Dartvel Studio and Studio Pro

Studio is free. It runs inside your web-server binary at /__studio, with its code served only to granted sessions.

Frontend and backend functions built from steps are free too. Studio Pro comes with Dartvel Cloud, and adds Figma import, reusable components, revision history and team review.

The page builder served by a web-server binary: Layers on the left, the selected heading on the canvas, its styles on the right.

# pubspec.yaml
dartvel:
  admin:
    enabled: true

$ dartvel build web-server
$ dartvel admin grant <user-id> --database dartvel_data/data.db
# open https://your-host/__studio and sign in there

Only people you grant can open it. Studio has its own sign-in at /__studio/login, so it opens even with your app's account pages turned off.

Design a data model in the browser, with field types, rules, relations, indexes and who may read and write it, and edit its records in a form. An edit made against a row that changed after you opened it is refused.

Studio fits a phone: sections move to a bar along the bottom, and the editor shows Elements, Page or Style one at a time.

Insert text, images, buttons, spacers and dividers, and arrange them in columns, rows, wraps, grids and stacks.

Select a node on the canvas or in Layers, style it in the inspector, preview phone, tablet and desktop widths, and undo any step.

Set padding and margin uniformly or on each edge; saved pages and exported Dart retain the spacing. Compact spacing fields announce their full names to screen readers.

Deploy sends the page to your website, phone and tablet apps, desktop apps, TVs, browser extensions and devices, or only the ones you tick.

No. The website shows a deployed page at once, and apps get it from your server the next time they open. Restore original page brings the compiled one back. Studio stays on your server. Apps never carry it.

The formula bar runs across the top of the editor, as in Excel or Power Apps. Select an element and its text is there; the box on the left picks any other field: its layout, its style, its action.

A formula is a value of that field's kind: "text", 12 * 2 + 4, #111827 or rgb(17, 24, 39), one of a choice's options, TRUE, or Navigate("/pricing"). It is highlighted as you type and offers completions: options, routes, data models and their fields, functions. Enter applies it, Esc puts back what was there, and a formula that is wrong says where and writes nothing. Each edit is one step in the canvas's undo history.

Ctrl+K (Cmd+K on a Mac) opens the command palette: every section, every page, every element on the page by name, and what can be done to it, found by typing a few letters. Ctrl+D duplicates the selected element, and Ctrl+/ lists every shortcut.

Studio inherits your app’s Material theme, light and dark. New projects start with Dartvel’s theme until you customise it.

On sign-in, the email and password fields have accessible labels. Tab from the password reaches Sign in; Enter submits it.

Tab reaches every button, every icon on the rail and the toolbar, and every toggle. Enter and Space both press one. The focus is drawn as a ring on the control itself, so you can see where you are.

A screen reader is told what each control is, what it is called and whether it works. A disabled control, such as Undo with no history or Sign in while signing in, announces its state and is skipped.

Ctrl+F works on a Studio screen, because Studio is a route of your app rendered by the same server as every other page. So does selecting text with the mouse, the arrow keys, a remote's D-pad and switch control.

Each screen has its own address: /__studio is Pages, /__studio/components is Components, /__studio/data/Product is one model and /__studio/data/Product/p-1 opens one record; so a screen can be linked, bookmarked and reloaded, and the server sends a document with it for anything reading without the app. Planned: that document fully interactive before Flutter loads.

Every page, the ones in your code included. Insert, Layers, the inspector, undo and redo, deploy, restore and code export.

Make a card, a header or a price box once and put it on any page. Each use sets its own text, picture, colour and tap; change the component and every page changes. Ctrl+Alt+K turns a selection into one.

Design data models, and browse and edit each model's records. Sensitive fields can be set there but never read back.

The modules your app mounts: where each is served, where it came from and whose tables it uses. One the build could not mount says so, with the reason.

Draft, review and schedule a page, with who approved which version and signed preview links. The editor is built and is not in the server Studio yet.

See what Studio changed as a diff, then open a pull request or push, so the next release is built with it. During dartvel dev Studio writes straight to your project's files.

dartvel docs builds a Flutter site of your models, functions, routes, jobs and policies. It is off unless dartvel.docs turns it on, and served behind Studio by default.

Every data model gives each record a public page with head tags and structured data, unless it opts out. A row's featured image does not become its favicon yet.

Frontend functions run in the app and backend functions on your server, each in its own Studio section. A frontend function calls a backend one by name.

Inputs and results have types, Text, Whole number, Number or Yes or no, and a run refuses the wrong type before any step runs.

Both builders are free: a page builder whose buttons can do nothing is not a page builder. Deploy saves the function, and Export writes ordinary Dart, so you can drop the builder.

The Frontend section of Studio with the orderAhead function open: Call, Condition and Return steps on the canvas, and the selected Condition step's argument on the right

The Backend section with the placeOrder function open and a Call step selected, and the backend functions the project wrote in code listed underneath by the address each answers

import 'package:dartvel_core/dartvel.dart';

// Exported from Dartvel Studio. Ordinary backend function:
// edit freely, the builder is no longer involved.
@DVBackendFunction()
@pragma('vm:entry-point')
Future<String> _welcomeCustomer(String email, bool wantsNews) => welcomeCustomerBody(email, wantsNews);

Future<String> welcomeCustomerBody(String email, bool wantsNews) async {
  final subject = 'Thanks for joining Oakline Coffee';
  final receipt = await sendWelcome(to: email, subject: subject);
  if (wantsNews == true) {
    await addToNewsletter(email: email);
  }
  return receipt;
}

import '../dartvel_client/dartvel_client.dart';

// Exported from Dartvel Studio. Ordinary frontend function:
// it runs in the app, and calls backend functions through
// the generated client. Edit freely, the builder is no
// longer involved.
Future<String> joinOakline(String email, bool wantsNews) async {
  final receipt = await welcomeCustomer(email: email, wantsNews: wantsNews);
  return receipt;
}

The run stops and names the step. A missing variable does the same, so a typo never sends mail to nobody and reports success.

Studio Pro comes with Dartvel Cloud. There is nothing separate to buy, and it is not in your web-server binary.

Every top-level frame becomes a page. Auto-layout, type, shadows, gradients and icons come through, and images are downloaded before Figma's links expire.

Editors see each other's changes over a transport you connect. An editor's Deploy waits for an approver, and both are in the audit trail.

Each picture below was taken by dartvel capture studio against a web-server binary built from this repository: it signs in, clicks each item on the rail and photographs what is on screen. A job takes them again whenever Studio changes, so a section added this week is a section you can see this week.

Every page: the ones in your code, marked Code, and the ones built in Studio. A page from your code opens read-only until you choose to edit it, and Restore compiled page takes the edit back. Beside them, how many pages are stored and when Studio last deployed.

Every data model in the app with its field count, and the records in each one. New data models are designed here, with field types, rules, relations, indexes and access. A module's models are listed under the module they came from.

Every address the app answers, the page that answers it and the file it is declared in, including the pages a mounted module brings.

The frontend function builder, and the frontend functions this app has. What a button does, built from steps; the Backend picture below shows one open. Free, in the Studio your own binary serves.

The backend function builder, and the backend functions your code already declares listed by the address each answers. Also free.

The modules this app mounts: where each is served, where it came from, how many pages it brings and whose tables it uses. One that failed to mount says so, with the reason.

The cache tags on this server and the keys under each, with a button that revalidates one and says how many keys it dropped.

Who may open Studio. Signing up to your app is not signing up to its admin, so every grant is made here by address.

dartvel create shop
cd shop && dartvel build web-server

Run your app's pages and data from a browser, and keep the code.

Open Studio on your live server with one grant.

Drag a page together, then keep it as an ordinary @DVPage.

Edit what is selected in one line, and reach anything with Ctrl+K.

Controls support keyboard and screen reader input.

Records, routes and review in the same place as your pages.

Docs and public pages come from what Studio reads.

Build what a button does and what the server does, from the same steps. Free.

Studio Pro adds Figma import, components and team review.

Bring in a design, reuse it and review it as a team.

All ten sections, photographed from a Studio that was run.

Open the free Studio on your own app today.