Build customized, self-contained JavaScript bundles for Constructor.io UI libraries. This tool allows you to customize Constructor.io UI components and generate a single JS file that can be embedded on any website.
| Library | Description | Documentation |
|---|---|---|
| PLP (Product Listing Page) | @constructor-io/constructorio-ui-plp |
View Guide |
- Node.js 18+
- npm
- Fork this repository to your own GitHub account
- Clone your fork and install dependencies:
npm installStart a dev server with hot module replacement for live preview:
# Start PLP dev server
npm run dev:plpOpen http://localhost:5173 in your browser. You'll be prompted to enter your Constructor.io API key (required) and an optional search query. Your API key is saved in sessionStorage so it persists across page reloads.
Start developing in ./Components/CustomCio<Component>.tsx and see your changes reflected live via HMR.
Each UI library has its own build command:
# Build PLP bundle
npm run build:plpSee src/cio-plp/example.html for a complete reference showing how to embed the built custom-cio-plp.js bundle on a page.
src/
├── vite-env.d.ts # Vite client type declarations
└── cio-plp/ # PLP UI library
├── README.md # PLP-specific documentation
├── index.tsx # Entry point (mount function)
├── components/
│ └── CustomCioPlp.tsx # Main customization file
└── dev/ # Dev server app
├── index.tsx # Dev entry point
├── Dev.tsx # Dev app component
└── DevStyles.css # Dev app styles
| Script | Description |
|---|---|
npm run dev:plp |
Start PLP dev server with HMR |
npm run build:plp |
Build the PLP bundle |
npm run lint |
Run ESLint |