Mastering NPM Component Extension Packages for Low‑Code Frontend Development

Component Extension Package Overview

Ai‑Speed (爱速搭) provides over 120 built‑in UI components for low‑code page design. For complex UI or interactions, developers can create custom components using three extension methods: Custom components, online custom components, and NPM component extension packages. The NPM approach is recommended for complex functionality.

NPM Component Extension Package Features

Supports multiple custom components in a single package.

Compatible with Vue 2.0, Vue 3.0, React, jQuery, and UniApp.

Provides three preview/debug modes: preview, local dev, and linkDebug.

Allows various custom component types: AMIS web components, mini‑program components, and quick‑app components.

The platform supplies the amis-widget-cli toolchain for local coding, preview, platform preview, and compilation.

Core Modules of an NPM Package

An NPM package consists of two essential modules:

AMIS renderer : Required for rendering the custom component on a page.

AMIS‑editor plugin : Integrates the component into the page designer, defining its category, order, description, and initial data.

Local Development Workflow

Developers use amis-widget to register renderers and editor plugins, and amis-widget-cli (based on AKFun) as the scaffolding tool. After coding, the component is compiled into static JS scripts (renderer and plugin) and published as an NPM package.

Multi‑Tech‑Stack Support

Non‑React components are wrapped into React components before registration, enabling Vue 2.0, Vue 3.0, and other stacks to run on the platform.

import React from 'react';
import ReactDOM from 'react-dom';
import Vue from 'vue';
// Vue 2.0 conversion example
export function createVue2Component(vueObj) { /* ... */ }
// Vue 3.0 conversion example
export function createVue3Component(vueObj) { /* ... */ }

Step‑by‑Step Development Guide

Globally install amis-widget-cli (e.g., yarn global add amis-widget-cli).

Initialize a package with amis init -e=amis -m=copy.

Develop the custom component (e.g., using Vue 2.0).

Register the component via registerRendererByType.

Define component properties and configuration with registerAmisEditorPlugin.

Preview locally using npm run preview or npm run dev.

Debug in the platform with npm run linkDebug and add the generated script URL as an external link.

Build static scripts ( npm run build2lib), update package.json with component metadata, and publish to an NPM registry ( npm publish).

Common Questions

Why use NPM for custom components? It decouples component delivery from the platform, suitable for private deployments.

Can existing business components be quickly packaged? Yes—just register them as AMIS renderers and add editor plugins.

Is it possible to develop components solely with amis-widget? Absolutely, for teams with strong front‑end engineering capabilities.

Can private NPM registries be used? Yes, but the platform’s built‑in search works only with public registries, so manual addition is required for private packages.