Upload a component module
Uploads a prebuilt module as a new ready version of the component its slug names, creating the component on its first upload.
The module must be a WebAssembly binary of at most 2 MiB carrying a valid vh.manifest section (a guest ABI 1 manifest or an ABI 2 component definition); a definition that declares an editor panel needs its panel module in panelBase64. Without a slug the manifest's name is used. A version that fails the conformance checks is kept so its findings can be read, but cannot be placed.
Guide: Components
A project secret key: vh_sk_... for production, vh_sk_test_... for test. Keep it on your servers.
In: header
Path parameters
The project's id, proj_.... A secret key works only in the project it belongs to.
Request body
application/json
TypeScript definitions
Use the request body type in TypeScript.
The slug of the component to add the version to, created when the project has none; defaults to the manifest's name.
The component's title; defaults to the manifest's title, and renames an existing component when it differs.
The prebuilt WebAssembly module, base64 encoded, at most 2 MiB, carrying a valid vh.manifest section.
1 <= lengthThe editor panel module (the crate built with its panel feature), base64 encoded. Required when the definition declares a panel.
Examples
curl -X POST "https://api.voidhash.com/api/v1/projects/proj_tz4a98xxat96iws9zmbrgj3a/components/modules" \ -H "Authorization: Bearer vh_sk_..." \ -H "Content-Type: application/json" \ -d '{ "slug": "offer-countdown", "moduleBase64": "AGFzbQEAAAAB..." }'{ "id": "cmp_ver_q9w3e7r1t5y8u2i6o0p4a8s1", "componentId": "cmp_x2c6v0b4n8m1q5w9e3r7t1y4", "version": 1, "sourceKind": "wasm", "status": "ready", "contentHash": "e3b9c1f7a5d2084b6e9f1a3c5d7b0e2f4a6c8d1b3e5f7a9c2d4b6e8f0a1c3d5e", "panelHash": null, "byteSize": 41872, "manifest": { "id": "project/offer-countdown", "version": "0.1.0", "title": "Offer countdown", "description": "The time left until an offer ends.", "icon": { "kind": "builtin", "name": "timer" }, "category": "Offers", "keywords": [], "implementation": { "kind": "wasm", "abi": 2 }, "traits": { "frame": { "resize": "none" }, "appearance": {}, "effects": {} }, "children": { "kind": "none" }, "props": [ { "name": "duration", "type": { "kind": "number", "min": 0, "max": 86400, "step": 1, "unit": "s" }, "default": 900 }, { "name": "color", "type": { "kind": "color" }, "default": "#ffffff", "group": "Style" } ], "events": [ { "name": "expired", "payload": [] } ], "previewStates": [ "default", "expired" ], "capabilities": [], "panel": false, "fallback": "placeholder", "defaultSize": { "width": "hug", "height": "hug" } }, "isDeprecated": false, "deprecatedAt": null, "warnings": [], "conformance": { "hasPassed": true, "checks": [ { "name": "module", "status": "pass", "errors": [], "warnings": [] }, { "name": "manifest", "status": "pass", "errors": [], "warnings": [] }, { "name": "imports", "status": "pass", "errors": [], "warnings": [] }, { "name": "exports", "status": "pass", "errors": [], "warnings": [] }, { "name": "lifecycle", "status": "pass", "errors": [], "warnings": [] }, { "name": "values", "status": "pass", "errors": [], "warnings": [] }, { "name": "tree", "status": "pass", "errors": [], "warnings": [] }, { "name": "determinism", "status": "pass", "errors": [], "warnings": [] }, { "name": "events", "status": "pass", "errors": [], "warnings": [] }, { "name": "timers", "status": "pass", "errors": [], "warnings": [] }, { "name": "layout", "status": "pass", "errors": [], "warnings": [] }, { "name": "actions", "status": "pass", "errors": [], "warnings": [] }, { "name": "frames", "status": "pass", "errors": [], "warnings": [] }, { "name": "memory", "status": "pass", "errors": [], "warnings": [] }, { "name": "golden", "status": "skip", "errors": [], "warnings": [] } ] }, "createdBy": "user_k3m8q1z6v9c2x5b7n4w0e8r1", "createdAt": "2026-03-16T13:05:00.000Z", "builtAt": "2026-03-16T13:05:00.000Z"}{ "error": { "type": "invalid_request", "code": "invalid_slug", "message": "The component slug is invalid. \"Plan Picker\" is not a valid slug: use lowercase letters, digits and dashes, starting with a letter or digit, at most 63 characters.", "param": "slug" }}{ "error": { "type": "unauthenticated", "code": "invalid_api_key", "message": "This secret key is not valid." }}{ "error": { "type": "permission_denied", "code": "permission_denied", "message": "Insufficient permissions." }}{ "error": { "type": "not_found", "code": "project_not_found", "message": "There is no project proj_tz4a98xxat96iws9zmbrgj3a, or this credential cannot use it.", "param": "projectId" }}{ "error": { "type": "internal", "code": "internal_error", "message": "Something went wrong on our side. Try again, and contact support with the Request-Id header if it keeps failing." }}{ "error": { "type": "unavailable", "code": "component_checks_unavailable", "message": "The conformance checks could not run, so nothing was published. Try again in a moment." }}Response body
application/json
application/json
application/json
application/json
application/json
application/json
application/json
Errors
| Status | type | code | When |
|---|---|---|---|
| 400 | invalid_request | invalid_slug | Naming every problem. |
| 400 | invalid_request | invalid_module | Naming every problem. |
| 400 | invalid_request | invalid_panel_module | Naming every problem. |
| 503 | unavailable | component_checks_unavailable | When the conformance checks could not run; nothing is stored then, so try again. |
It can also fail with the errors every operation shares, such as unauthenticated; see Errors.
More in Components
- List components
GET - Submit a component's source
POST - Retrieve a component
GET - Update a component
PATCH - Delete a component
DELETE - List a component's versions
GET - Retrieve a component version
GET - Update a component version
PATCH - List component uses
GET
Something wrong or missing on this page? Tell us by email or on Discord.