Skip to main content

Studio

Velkin Studio is the Angular web app where you author templates, configure options, and preview output without leaving the browser. It talks to the API over /api and opens directly on your projects — there's no login.

  • URL (default): http://localhost:8080
  • Editor: CodeMirror 6 (HTML, JSON, and JavaScript modes)
  • Preview: on-demand HTML and PDF render modes, triggered from the panel
  • History: per-file revisions with view + restore, grouped into commits
Interface language

The Studio's interface strings are in Italian by design. The concepts map one-to-one to the rest of these docs.

Projects

A project in the sidebar is a report. Create one with New project; its slug (used in API URLs) is derived from the name. Selecting a project opens its files in the editor.

The file tabs

Every project always carries three reserved files, plus whatever template assets you've added:

TabBacksWhat you edit
options.jsonoutputOptionsActive template, preferredOutput, PDF settings
data.jsonsampleDataSample data used for preview and as render fallback
helpers.hbshelpersHbsJavaScript helpers & partials
your template(s)a template asset.html source, or an uploaded .docx / .xlsx

Add a template with the new-file action (.html is authored inline; .docx and .xlsx are uploaded). Adding a template doesn't activate it — pick the active template in options.json (the template field) before rendering.

Editing

The editor is CodeMirror 6, with syntax highlighting matched to each tab's kind: HTML for templates, JSON for data.json/options.json, and JavaScript for helpers.hbs (which can hold JS helpers — see Helpers). Click Save in the topbar — this persists the file to the report so the API can render it. Unsaved tabs are marked dirty.

Once a file is saved, render it from the preview panel and track changes through its version history.