0.9.34-beta.4 • Public • Published

    Aurigma Customer's Canvas SDK - Design Atoms Framework

    Design Atoms is a part of Customer's Canvas SDK which allows manipulating individual elements of a design edited in the Customer's Canvas web-to-print editor. If you think of Customer's Canvas editor as a browser, you may consider Design Atoms as a DOM API.

    For example, you may import a template to Customer's Canvas, then use Design Atoms to iterate all items, find, say, text elements named, say, Name and change its value. Or you can create a brand new design and pass it to Customer's Canvas.

    Important! This package won't work alone. Design Atoms consists of a frontend part (this package) and a backend part (search for a package called Aurigma.DesignAtoms in NuGet). To be able to use Design Atoms, you need to connect it to a backend. See below for details.

    Getting started

    Install Design Atoms frontend library

    Just run

    npm install @aurigma/design-atoms --save

    Then, you may import modules to your project and start using them.

    import { Product } from "@aurigma/design-atoms/Model/Product";
    let product = new Product([new Surface(100, 100)]);
    // ...  

    However, to be able to use it in a full force, you need to connect it with a backend.

    There are two main ways to get a backend - create your own backend using the Aurigma.DesignAtoms NuGet package or hook it to an existing Customer's Canvas instance.

    Creating a custom backend

    This way is a good option if you don't need the editor but rather need to manipulate designs through the JavaScript/TypeScript or C# code and render the result in your application. Also, it is a way to go if you want to create a custom editor based on the Viewer control. Another purpose is to handle the output from Customer's Canvas in a separate application.

    To do it, you need to create a .NET Web API project, add a reference to Aurigma.DesignAtoms NuGet package and expose the necessary endpoints.

    You can download a sample backend implementation from GitHub and use this sample solution as a separate object or merge it with your existing ASP.NET application.

    Connecting to Backend

    You can use a running instance of either custom backend or Customer's Canvas 5. To connect to your backend, add the following code.

    const backendUrl = "http://<yourInstanceUrl>";
    const holderId = "#id-of-your-div";
    const holder = document.querySelector(holderId) as HTMLDivElement;
    const viewer = new Viewer({
        holderElement: holder,
        backendUrl: backendUrl,
        canvasBackground: { color: "white" }

    What's next?

    Refer Customer's Canvas documentation for more details on how to use this package:


    npm i @aurigma/customerscanvas-core

    DownloadsWeekly Downloads





    SEE LICENSE IN License.md

    Unpacked Size

    2.56 MB

    Total Files


    Last publish


    • kirillaleut
    • asimontsev
    • stas.gusarov
    • t.vybornova