Upload & Publish

This page walks through publishing a local component to the platform. The first publish must go through here; later iterations are covered in Update & Versioning.

Checks before uploading

• [ ] The component is a standalone folder containing an entry file (see Component Spec).
• [ ] The dependencies in use are present in the current project's node_modules.
• [ ] Single file ≤ 3 MB, total size ≤ 10 MB, file count ≤ 30.
• [ ] The component name is PascalCase or kebab-case and does not clash with an existing one.
• [ ] A README.md is prepared, with props and events clearly documented.

Publishing in five steps

1. Open the upload page

After starting the local service, click "Upload Component" in the left menu.

2. Select the component directory

The file tree on the left shows the directory specified by dir in the configuration file. Navigate to the component folder, select it and click "Select".

3. Configure the preview

The upper part of the page is a live preview; the lower part is the configuration area:

Setting	Description
Mini Preview	The file shown on list cards, by convention demo/index.vue
Full-Screen Preview	The file shown on the detail page, by convention demo/full.vue
Component Dependencies	Auto-scanned from the source; check for anything missing before publishing
Remarks	One sentence describing what the component is for
Additional Info	A longer description that also feeds search keywords

For Vue / React pick .vue / .jsx / .tsx files; for Web Components pick .html files.

4. Generate the configuration

Click "Generate Configuration" and the platform writes comp.json:

{
  "__id__": "xxxxxxxxxxxxxxxxxxxxxxxx",
  "name": "MyComponent",
  "version": "1.0.0"
}

After the first successful publish the server writes __id__ back. Do not edit it by hand — it is how the component is identified on later updates.

5. Publish

Once the preview and dependencies look right, click "Publish". After a successful publish the component appears in "My Components" and enters the component market according to the recommendation rules.

How the framework is detected

The platform applies the following rules in order and stops at the first match:

1. index.vue exists → Vue.
2. index.jsx / index.tsx exists → React.
3. Any source file contains customElements.define( or extends HTMLElement → Web Component.
4. index.js exists with no custom element registration → React.
5. No match → no default is given and you must choose on the upload page.

"Component Framework" under "Additional Info" on the upload page overrides the detection result — the UI selection wins.

Do not depend on both vue and react in one component

Otherwise the framework cannot be determined, and both checking and rendering fail.

Duplicate components

The platform performs similarity detection. When a component is judged a duplicate:

• It does not enter the "Recommended", "Popular" or "Latest" lists.
• It is only visible in "My Components".
• It appears in the recommendations of similar components.
• Updates get no recommendation weight either.

Searching for an existing component of the same kind before uploading saves a round of rework.

First publish versus updates

	First publish	Later updates
Entry	Upload page	Update page or comphub upload
Creates the component	Yes, and writes __id__	No, only adds a version
Preview / description editable	Yes	Update page: yes; CLI: no
Version number	Initial version	Code changes require a bump

Troubleshooting a failed publish

Symptom	Cause	Fix
A missing dependency is reported	The dependency is not installed in the current project	Run npm install <pkg> in the project root
Component has no default export	The React entry only has named exports	Change it to export default
The Web Component preview reports that no module script was found	The HTML has no <script type="module">, or it sits in <head>	Move it into <body>
The preview is blank with no terminal error	An alias was used for an asset path, or a dependency spans a major version	Switch to relative paths and check the dependency
A file limit is reported	Single file > 3 MB / total > 10 MB / count > 30	Compress assets or split the component

Next steps

• Keep iterating on versions: Update & Versioning
• Publish from the command line: Using the CLI
• Develop and publish from scratch in the browser: Using Studio