Skip to main content

T-shirt Designer

Many e-commerce / print-on-demand businesses just need a minimal canvas + a download button: users add some text or images in the printable area, click download, and get a transparent-background print-ready PNG that the order system can composite onto a real T-shirt mockup.

This demo shows how to keep only the canvas and drop everything else.

The approach​

  1. Set the canvas to the real print pixel size (e.g. 600 × 800)
  2. Set the background to transparent (rgba(0,0,0,0)) — Ydesign auto-renders a checkerboard hint
  3. Render only <Workspace />, no <Toolbar /> / <SidePanel />
  4. Add your own "Add text" and "Download" buttons
  5. Export at multiplier: 2 for print-quality output

Code​

import { observer } from 'mobx-react-lite';
import { Button } from 'antd';
import { createStore } from '@ydesign/react-editor';
import Workspace from '@ydesign/react-editor/canvas/workspace';
import '@ydesign/react-editor/style.css';

const store = createStore({ key: 'YOUR_API_KEY' });

// Key config: size + transparent background
store.setSize({ width: 600, height: 800 });
store.setBackgroundColor('rgba(0, 0, 0, 0)');

// Default piece of text
store.addElement({
  type: 'Textbox',
  text: 'Print what you want',
  left: 100,
  top: 360,
  width: 400,
  fontSize: 72,
  fontFamily: 'Roboto',
  fill: '#000000',
  textAlign: 'center',
});

const App = observer(() => {
  const handleAddText = () => {
    store.addElement({
      type: 'Textbox',
      text: 'New text',
      left: 100,
      top: 100,
      width: 400,
      fontSize: 48,
      fill: '#111',
    });
  };

  const handleDownload = async () => {
    // multiplier=2 outputs a 1200×1600 high-res print file
    await store.saveAsImage({
      multiplier: 2,
      format: 'png',           // transparent background requires png
      fileName: 'my-t-shirt.png',
    });
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
      <div style={{ padding: 12, display: 'flex', gap: 8 }}>
        <Button onClick={handleAddText}>Add text</Button>
        <Button type="primary" onClick={handleDownload}>Download</Button>
      </div>
      <div style={{ flex: 1 }}>
        <Workspace store={store} />
      </div>
    </div>
  );
});

export default App;

Key points​

  • Transparent background: Workspace shows a checkerboard automatically so users see what's transparent; the downloaded PNG keeps the transparency
  • multiplier: 2×~4× for printing — balance file size and sharpness; use 4× for 300 dpi
  • Canvas-only: drop Toolbar / SidePanel to give every pixel to the canvas

Next steps​

  • Color picker: store.set({ fill: color }, selectedElement)
  • Upload: wire setUploadFunc to your own OSS
  • Live T-shirt preview: overlay the exported image onto a T-shirt mockup (CSS background-blend-mode or server-side compositing)

See also​