Skip to main content

Frameworkless integration

The official UI package is @ydesign/react-editor, but if your page doesn’t use React and you don’t want a separate build toolchain, you can embed the editor into any HTML page with a plain <script> tag.

We ship a ready UMD / IIFE build. After loading it from a CDN, createYdesignApp is available on window — one call mounts a full editor.

Usage​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Ydesign Demo</title>

    <!-- 1. Editor styles -->
    <link rel="stylesheet" href="https://unpkg.com/@ydesign/react-editor/dist/style.css" />

    <!-- 2. Bundle (must be at the end of <body>, not in <head>) -->
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #container {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <!-- 3. Mount container -->
    <div id="container"></div>

    <!-- 4. Bundle exposes createYdesignApp on window -->
    <script src="https://unpkg.com/@ydesign/react-editor/dist/ydesign.bundle.js"></script>

    <!-- 5. Init -->
    <script>
      const { store } = window.createYdesignApp({
        container: document.getElementById('container'),
        key: 'YOUR_API_KEY',
        // Optional: only the side-panel sections you need
        // sections: ['templates', 'text', 'photos', 'shapes', 'background', 'layers'],
      });

      // store is the full MobX-State-Tree instance
      // e.g. store.setSize(1200, 800);
      // store.editor.zoomHandler.zoomToFit();
    </script>
  </body>
</html>

When to use this​

✅ Good fit:

  • Static HTML, Jekyll / Hugo blogs, legacy pages
  • No npm / bundler environment
  • Quick demos to validate the editor
  • Embedding into one region of an existing page without changing the host stack

⚠️ Poor fit:

  • Deep customization of side panel / toolbar (you can’t import submodules)
  • SSR
  • Strict first-load budgets (the UMD bundle includes everything — ~700KB+ gzipped)

If any of the above apply, prefer Non-React integration or the npm package.

Same API as createDesignEditorApp​

createYdesignApp is the same function as createDesignEditorApp from the npm package. Everything in Customizations applies:

window.createYdesignApp({
  container: document.getElementById('container'),
  key: 'YOUR_API_KEY',
  sections: ['templates', 'text', 'photos', 'shapes', 'background'],
});

// Common helpers are also mirrored on window.Ydesign
window.Ydesign.setBaseURL('https://api.your-company.com');
window.Ydesign.setTranslations({
  /* i18n dictionary */
});
window.Ydesign.setUploadFunc(async file => {
  // custom upload
});

Minimal example​

Save as index.html and open in a browser:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://unpkg.com/@ydesign/react-editor/dist/style.css" />
    <style>
      body,
      html {
        margin: 0;
        height: 100%;
      }
      #app {
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/@ydesign/react-editor/dist/ydesign.bundle.js"></script>
    <script>
      window.createYdesignApp({
        container: document.getElementById('app'),
        key: 'YOUR_API_KEY',
      });
    </script>
  </body>
</html>

FAQ​

Q: Why must the <script> be at the end of <body>?
A: The bundle looks up container at startup. If it runs from <head> before the node exists, it throws.

Q: What is key?
A: Credential for backend APIs (templates, fonts, AI, …). Request one from the Ydesign console. For local demos any string is fine.

Q: Does the bundle support tree-shaking / code-splitting?
A: Not yet. Use the npm package and let Vite / Webpack / Rspack tree-shake.