Skip to main content

Introduction

ChamevoJS is a modern, TypeScript-based product customizer built on FabricJS v7 and StencilJS. It lets your customers design and personalize products directly in the browser.

Packages​

PackageInstallUse Case
@chamevo/customizernpm install @chamevo/customizerFull customizer — drop-in web component with complete UI
@chamevo/corenpm install @chamevo/coreHeadless — canvas + orchestration, build your own UI
@chamevo/componentsnpm install @chamevo/componentsComponents only — StencilJS UI without the bundle
@chamevo/typesnpm install @chamevo/typesTypes only — TypeScript interfaces for type-safe integrations

Quick Example​

<script type="module">
    import { createCustomizer } from '@chamevo/customizer';

    const customizer = createCustomizer('#container', {
        stageWidth: 900,
        stageHeight: 600,
    });

    customizer.addEventListener('cvReady', async () => {
        await customizer.loadProduct({
            title: 'T-Shirt',
            views: [{
                title: 'Front',
                elements: [{
                    type: 'image',
                    source: '/images/tshirt.png',
                    title: 'T-Shirt',
                    parameters: { left: 450, top: 300, draggable: false },
                }],
            }],
        });
    });
</script>

<div id="container" style="width: 100%; height: 100vh;"></div>

Or use the core package directly for headless mode:

import { ChamevoJS, ChamevoCanvas } from '@chamevo/core';

Choose Your Integration Tier​

I want...Use
A working customizer with minimal code@chamevo/customizer
Full control over the UI@chamevo/core ChamevoJS API
Low-level canvas only@chamevo/core ChamevoCanvas

Next Steps​