Using Studio

Studio is a component workspace inside the browser: file tree on the left, editor and dual previews in the middle, AI chat and terminal on the right. It needs no local environment — open the page and you can write a component from scratch and publish it.

Entering Studio

Two ways in:

• Open the Studio URL directly (production: studio.comphub.cn).
• Click "Open in Studio" on a component detail page to import the online component as a workspace.

The first visit shows the workspace picker: it lists the workspaces already present in this browser, where you can continue one or create a new one.

Data lives in the browser

Workspaces, files and conversation history are stored in this browser's IndexedDB and are not synced to other devices or browsers automatically.

Interface tour

Area	Contents
Left panel	File tree: create/delete files, drag and drop, switch components
Middle panel	Code editor + preview panels (mini window / full screen)
Right panel	AI chat and terminal (switch between them in the same column)

Dividers between panels can be dragged, and the preview panel can be expanded to inspect details.

Creating a component

Click create and choose a tab in the "Create Component" dialog:

From template

Field	Description
Framework	Vue / React / Web Component
Version	The major version of Vue or React (e.g. Vue 3, React 18)
Name	Component name, must follow the naming conventions
Tag	Web Component only: the custom element tag name, e.g. my-element

After creation Studio generates the entry file, README and comp.json, and installs the matching runtime automatically. Package installation progress shows in the terminal panel.

Local import

Drag an existing component folder into the dialog, or pick local files. This suits moving an old component out of a project and editing it here.

Editing and previewing

• The preview refreshes automatically after you save a file.
• .vue files have no module-level hot update, so saving triggers a full page refresh (about 300ms of debounce).
• Previews come as two panels, mini and full, matching how the component appears on list cards and the detail page respectively.
• The preview entries can be assigned in the file tree; when unassigned, the spec defaults are used (demo/index.vue / demo/full.vue).

Blank preview? Check dependencies first

Packages used by the component must be installed first. When something is missing the top bar warns you and the terminal names the missing package.

AI chat

The chat area on the right lets AI change code in natural language. There are two model sources:

Source	Configuration	Quota
Platform built-in	Nothing to configure; pick a model after logging in	Unlimited for signed-in users; anonymous users are limited by ID + IP
Custom key	Choose a provider under "Settings", enter an API key and pick a default model	Determined by the provider

Custom keys are stored only in this browser and are never uploaded. Settings lets you share one configuration across multiple workspaces.

Every AI change is presented as an action card: write, delete, run a command, and so on. Anything involving a deletion, or needing your choice, shows a confirmation card first and only runs after you confirm. Failures report the reason instead of pretending to have succeeded.

Terminal

Use the terminal to install dependencies:

npm install echarts

Only package installation commands such as npm install / npm i / npm add are allowed; anything else is blocked with a notice. The npmmirror registry is used by default and can be switched back to npmjs in the terminal panel.

Installation happens in a virtual environment inside the browser and does not affect your local project.

Snapshots and recovery

Studio saves workspace snapshots to IndexedDB automatically:

• Files and conversations are restored after a page refresh.
• Switching tabs or closing the page is covered by a debounced fallback.
• Deleting a workspace removes its snapshots as well.

If the directory looks empty after a refresh, first check whether you just deleted a large amount of content; if needed, switch to another historical workspace from the workspace list.

Publishing to the component hub

Select the component root in the file tree and click publish. The flow has three parts:

1. Sign-in authorisation

When you are not signed in, an authorisation entry appears; confirm in the browser and you return to Studio. Authorisation is needed only once.

2. Fill in the release information

Field	Description
Name	Component name, fixed after the first publish
Version	Semantic version; must be greater than the online one when updating
Description	One sentence about what it is for
Tags	Up to 5, to help with search
Release note	What changed in this release, filled in when updating

3. Wait for the publish stages

Studio runs screenshot capture, file collection, pre-checks, dependency pre-compilation and submission in sequence, showing progress for each stage. When everything is done you get the result plus a link to the component detail page.

The publish button decides automatically whether it is a "Publish" or an "Update": it shows Update when the workspace came from an online component and you are still its author (or a collaborator), and Publish otherwise.

Missing preview entries block publishing

When the mini or full preview entry does not exist, you are asked to add it before publishing. Place demo/index.vue and demo/full.vue as described in Component Spec.

Studio or CLI?

Scenario	Recommended
Writing a component from scratch, watching the effect while editing	Studio
First publish, needing preview and description configuration	Studio or the upload page
Changing code in an existing component and shipping fast	comphub upload
Changing only the description, tags or preview configuration	The platform's update page

FAQ

The preview stays blank

First check whether the terminal is still installing dependencies, then confirm the component entry has a default export. For Web Components, check that the preview HTML contains a module script inside <body>.

AI does not respond

Check the current model source: the platform built-in model requires a login; a custom key must be valid and the model available.

Publishing says you are not signed in

Go through the authorisation entry again. The authorisation page only confirms your identity; it does not copy your browser session into Studio.

The files are gone after a refresh

Confirm that you did not delete the workspace. Snapshots are isolated per workspace, so after switching workspaces you are looking at a different set of files.

Next steps

• How to write a component and its limits: Component Spec
• Version management after publishing: Update & Versioning