Introducing Ezyreka: a Canva-style design editor in one script tag

Products

1 day ago

22 Sep 2026

Introducing Ezyreka: a Canva-style design editor in one script tag

by: A.Hakim

Every web product eventually gets the same feature request: "can users customize this?" A poster, a banner, a social graphic, a product card. Historically, answering yes meant integrating a heavyweight design tool, paying per seat, or building a canvas engine from scratch. Ezyreka is our answer to that problem: a full Canva-style design editor you can embed in any web app with a single script tag.

Ezyreka is a free, open-source (MIT), embeddable JavaScript library from Bookklik TechnologiesNo frameworks. No runtime dependencies. One script tag. It runs with its built-in UI, or as a headless canvas engine if you'd rather build your own interface on top.

What you get out of the box

Ezyreka is a complete design environment, not a drawing toy:

  • Canvas engine with a DOM overlay for handles, snapping, and guides.
  • Elements: text, images, shapes, lines, and icons, with full transforms, snapping, and inline text editing.
  • Editable charts (data and style), multi-page documents, and 32 editable templates to start from.
  • A real editor UX: layers panel, undo/redo, copy/paste, zoom and pan, context menu, and keyboard shortcuts.
  • Export: PNG, JPEG, and JSON project files, plus themes, headless mode, and a customizable UI.
  • Extensibility: custom element types, renderers, chart types, sidebar panels, and community plugins.

Getting started

Declarative: one div, one script

<div
  id="app"
  data-ezr-editor
  data-ezr-width="1080"
  data-ezr-height="1080"
  data-ezr-name="My design"
></div>
<script src="https://unpkg.com/@bookklik/ezyreka/dist/ezyreka.umd.js"></script>

Size the container with CSS (for example, #app { width: 100vw; height: 100vh; }) and you have a working design editor on the page.

Programmatic: full control

const { Editor } = Ezyreka; // UMD global

const editor = new Editor({
  target: '#app',
  width: 1080,
  height: 1080,
  name: 'Untitled design'
});

editor.on('ready', () => {
  editor.addText({ text: 'Hello Ezyreka', fontSize: 96, fontWeight: 800 });
  editor.addElement({ type: 'rect', x: 340, y: 620, w: 400, h: 110, radius: 55 });
});

Using a bundler? Run npm install @bookklik/ezyreka and import { Editor } from '@bookklik/ezyreka'. Plain HTML, React, and Vue integrations are in the examples folder.

Headless when you need it

The built-in UI is optional. Drive the canvas engine directly to build your own branded experience, with your own sidebars, toolbars, and design system, while Ezyreka handles the hard parts: hit testing, transforms, snapping, rendering, and export.

Where it fits

  • SaaS products letting users customize graphics, cards, and marketing assets in-app.
  • E-commerce platforms offering product banner and thumbnail design.
  • Internal tools and print workflows that need a canvas editor without vendor lock-in.

Ezyreka runs in all modern evergreen browsers (Chrome, Edge, Firefox, Safari), using HTML5 Canvas 2D, Path2DResizeObservercontenteditable, and pointer events.

Full guides and the API reference live at https://bookklik-technologies.github.io/ezyreka/.

Try it

Give your users the power to design without giving up your margins or your stack. Star the repo, embed the script, and tell us what you build on GitHub.

Ezyreka is part of the Ezy suite by Bookklik Technologies, alongside Ezygrid (spreadsheets) and Ezynota (block-style editor).