Ydesign Button

Embed the full editor into any website with a single script tag — it opens as a modal iframe.

Result

Loading...

Live Editor

function Demo() {
  const [preview, setPreview] = React.useState(null);

  const open = () => {
    openYdesignEditor({
      key: 'DEMO_API_KEY',
      sections: ['templates', 'photos', 'text', 'shapes', 'upload', 'background', 'layers', 'size'],
      defaultSection: 'photos',
      publishLabel: 'Done',
      onPublish: ({ dataURL, json }) => {
        setPreview(dataURL);
        console.log('[ydesign] json', json);
      },
    });
  };

  return (
    <div style={{ textAlign: 'center' }}>
      <button className="button button--primary" onClick={open}>
        Open Ydesign Editor
      </button>
      {preview && (
        <img
          src={preview}
          alt="export preview"
          style={{ display: 'block', margin: '16px auto 0', maxHeight: 200 }}
        />
      )}
    </div>
  );
}

The playground above is editable — change sections / publishLabel and click the button to try it.
Default Studio URL: https://yitu-design.com/studio. For local testing, run demo-iframe then demo-button, and pass url: 'http://localhost:5174/studio/'.

Why Use Ydesign Button?

1. Zero-build integration: One <script> tag — no React, Vue, or bundler required
2. Style isolation: The editor runs in an iframe and won't affect your host CSS
3. Lazy load: Nothing loads until the user clicks the button
4. Result callback: On "Done", onPublish returns the image and JSON to your app

How to integrate?

1. Add the script:

<script src="https://static.yitu-design.com/button-v1.js"></script>

2. Add a button:

<button id="open-ydesign">Open Editor</button>

3. Wire the click handler:

document.getElementById('open-ydesign').addEventListener('click', () => {
  window.createYdesignEditor({
    key: 'YOUR_API_KEY',
    onPublish: ({ dataURL, json }) => {
      // dataURL: exported PNG (use as <img src>)
      // json: design data — save it and reload later
    },
  });
});

Options

Edit the Live Playground above to try options. Full reference:

function inchesToPx(inches) {
  const dpi = 72;
  return inches * dpi;
}

window.createYdesignEditor({
  key: 'YOUR_API_KEY',

  // Initial canvas size
  width: inchesToPx(20),
  height: inchesToPx(10),

  // Side panels (omit to show all)
  sections: ['templates', 'photos', 'text', 'shapes', 'upload', 'background', 'layers', 'size'],
  defaultSection: 'photos',

  // Initial data: jsonUrl or json
  // jsonUrl: 'https://example.com/template.json',
  // json: { /* design JSON */ },

  publishLabel: 'Save',

  onPublish: ({ dataURL, json }) => {
    document.getElementById('result').src = dataURL;
  },
  // Fires on every edit (useful for autosave)
  onChange: ({ json }) => {
    console.log(json);
  },

  // Seed assets for the Upload panel
  uploads: [
    {
      url: 'https://example.com/image.jpg',
      preview: 'https://example.com/image-thumb.jpg',
    },
  ],

  // i18n
  translations: {
    sidePanel: {
      templates: 'Templates',
      photos: 'Photos',
      text: 'Text',
      shapes: 'Shapes',
    },
  },
});

React / Vue usage is the same: load the script once in useEffect / onMounted, then call window.createYdesignEditor.

Compared to other integrations

Integration	Learning curve	Customization	Host framework
Ydesign Button (this page)	Low	Medium (config)	None
Frameworkless	Medium	Medium–high	None
@ydesign/react-editor	Medium	Highest	React
@ydesign/vue-editor	Medium	Highest	Vue 3