Getting Started

Welcome to RenderStack

Welcome to RenderStack, an API-first dynamic image generation platform. Design templates visually, mark layers as dynamic, and generate personalized images at scale via a simple REST API.

What is RenderStack?#

RenderStack lets you create image templates with a visual editor and then generate unique variations of those images programmatically. Instead of manually creating hundreds of social media graphics, certificates, or product cards, you design one template and let the API handle the rest.

Key benefits:

  • Design once, render infinitely — Create a template and generate thousands of unique images
  • No design skills needed for rendering — Developers call the API with data; the design stays consistent
  • Real-time rendering — Generate images on-demand via API calls
  • Full control — Override text, images, colors, and visibility per render

Quick Start#

1. Sign In#

Click Get Started or Log In on the homepage to authenticate with your account. RenderStack uses secure authentication to protect your templates and API keys.

2. Create Your First Template#

  1. Navigate to Templates from the sidebar
  2. Click New Template
  3. You'll be taken to the visual template editor where you can design your image template

3. Design Your Template#

Use the toolbar at the top of the editor to add elements:

  • Text (T) — Add headings, labels, or dynamic text fields
  • Image (I) — Add image placeholders for dynamic content
  • Rectangle (R) — Add colored boxes, backgrounds, or containers
  • Ellipse (E) — Add circles and oval shapes
  • Line (L) — Add dividers or decorative lines

Arrange elements on the canvas by dragging them. Use the Properties panel on the right to fine-tune position, size, colors, and other settings.

4. Make Layers Dynamic#

This is where RenderStack becomes powerful. Any element can be made "dynamic," meaning its content can be overridden via the API at render time.

Why make layers dynamic?

  • A text layer marked dynamic lets you change the text for each render (e.g., different names on certificates)
  • An image layer marked dynamic lets you swap in different photos (e.g., profile pictures)
  • A shape layer marked dynamic lets you change its color (e.g., different accent colors per brand)

How to do it:

  1. Select any element on the canvas
  2. In the Properties panel, check Dynamic
  3. Give the element a descriptive Name (e.g., headline, profile_photo) — this name is used as the key in API calls

Example: If you have a text element named headline and marked as Dynamic, you can override its text by passing "headline": { "text": "Your Custom Text" } in the API call.

5. Generate an API Key#

To call the rendering API, you need an API key:

  1. Go to API Keys from the sidebar
  2. Click Create API Key
  3. Give it a name and select the type:
    • Master — Full access to all templates and operations
    • Project — Scoped to specific templates
    • Read-only — Can only read templates, not render
    • GET — For dynamic image URLs (embed images via <img> tags)
  4. Copy the generated key — you'll need it for API calls

6. Render via API#

Make a POST request to render your template with custom data:

curl -X POST https://your-app.replit.app/api/v1/renders/sync \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "your-template-slug",
    "layers": {
      "headline": { "text": "Hello World!" },
      "profile_image": { "src": "https://example.com/photo.jpg" },
      "accent_bg": { "fill": "#ff6b35" }
    }
  }' \
  --output rendered-image.png

The API returns a rendered PNG image with your dynamic data applied. Only layers you include in the layers object are overridden — everything else stays as designed in the editor.

Understanding the Workflow#

Design Template  →  Mark Dynamic Layers  →  Create API Key  →  Call API with Data  →  Get Image
  1. Design your base template in the visual editor
  2. Mark the elements you want to change per render as dynamic
  3. Get an API key for authentication
  4. Call the render API with your template slug and layer overrides
  5. Receive a fully rendered PNG image

Tips for Success#

  • Start simple — Begin with a template that has 2-3 dynamic layers and expand from there
  • Use the preview — The editor shows your template as it will look with default values
  • Test early — Try an API call as soon as you have one dynamic layer set up
  • Name consistently — Use a naming convention like section_element (e.g., header_title, header_subtitle)

Importing & Sharing Templates#

Already have a template from another organization? You can import it:

  1. Go to Templates and click Import
  2. Select a .json template export file
  3. The template is created in your organization as a draft with a preview thumbnail

You can also export your own templates to share with others — click the three-dot menu on any template card and select Export.

Learn more in the Template Export & Import guide.

Next Steps#