Build visually in Studio

From a source to a workspace

Open Studio and choose weather, earthquakes or development. Each template makes a real request to its named provider. The source panel shows its URL, attribution, units and warnings; failures remain visible and can be retried. The API guide explains the exact datasets and service terms.

Studio is an example application built with Quartile. It does not need an account. It offers a bounded editor for one public dataset and up to sixteen views, while React components remain available for a custom application.

Add views and map fields

Add or remove a view, change its type and title, select fields, move it earlier or later, and set half or full width on a twelve-column layout. Small screens stack the views. Invalid mappings show a message instead of a misleading chart.

A new bar starts without a measure: choose an additive numeric field explicitly. A new line leaves series unset; select one when repeated x coordinates belong to separate groups, such as country/year observations.

The preview renders native Quartile components after checking the project and field mappings. A Studio project contains editor state and source configuration, so it is not interchangeable with a bare Dashboard spec. See spec validation for that separate contract.

Change or supply a source

Choosing a built-in template starts its source and default layout, discarding unsaved edits. Save a draft or export first. Submitting a custom public HTTPS URL and optional records path starts a count and table after loading. New data is validated before rendering; incompatible imported mappings require remapping. The custom JSON contract covers flat cells, CORS, credential restrictions and the 2 MiB / 5,000-row / 64-field bounds.

Loading, cancellation, errors and empty responses are explicit. Request cancellation stops the current request; retry or refresh makes another. No fixture replaces a failed API call. There is no automatic polling or connector for private credentials.

Format values without changing observations

The Data formatting inspector sets provider locale/time zone and per-field presets, precision, currency, unit, description and time zone. Choose value, axis or tooltip independently: a compact axis can coexist with a precise table and explanatory tooltip. Advanced field JSON is validated when you Apply; invalid edits retain the last valid presentation.

Formatting leaves raw records, source requests, shared selection and table search unchanged. Provider settings and field overrides are stored in optional project.formatting, including saved drafts and exported project JSON. The native React starter writes provider props and schema overrides inline, with no additional runtime dependency.

Read Formatting and notation for the full descriptors, missing-value handling, exact display boundaries, optional FormatJS/math.js callbacks and raw/formatted CSV choice.

Keep the result in your codebase

Runnable source and starter downloads require a successfully loaded dataset and valid field mappings. Project JSON can preserve structurally valid, incomplete mappings to finish later. The React source mode lets you inspect the native component composition. Switching between canvas and source preserves the current exploration, as does reordering a block; transient table settings and selections are still excluded from project and source exports.

The starter uses a bundled local Quartile tarball because the preview is not published to npm. Use Node.js 22.12 or newer, unzip it, follow its README, and run:

npm install
npm run dev
# Check a production build:
npm run build

Install still needs the npm registry for the starter's other dependencies. API data is fetched when the exported application runs; exporting configuration does not create a data snapshot or guarantee future provider availability. The starter checks its actual field mappings against each response and reports incompatible or missing fields rather than rendering a misleading view. Keep provider credits and review terms for your application.

For an existing Next.js app, keep the exported interactive component inside a client boundary, import the stylesheet once, and move private requests into your own server. See Framework integration and source installation.

Projects and local drafts

Project version 1 stores a name, source, ordered blocks and optional formatting configuration. Import validates its structure, allowed properties, component kinds, field-name syntax, format settings and size; field existence is checked against loaded data. At most sixteen blocks and 64 KiB of project JSON are supported. Treat imported URLs as public configuration and review them before loading.

Save local draft explicitly saves the current configuration in this browser; there is no automatic saving. Restore draft reloads it and requests its source again. Delete draft removes the saved copy. Drafts contain configuration, not records, credentials, collaborators or server state. Export JSON for a portable project; local storage is not a backup or synchronization service.

Choose Studio or compose directly

Studio covers six view types, one bounded dataset, basic layout and field mapping. Use native React for multiple sources, joins, custom transforms, application navigation, authenticated requests, persistence, deployment or component types outside this editor. Quartile does not host your resulting app or supply a managed data platform.

Selections link compatible chart views. Local DataExplorer search, filters and column controls remain table state; they do not automatically narrow sibling charts or become saved project configuration. Read linked selection and DataExplorer when extending the exported app.