Skip to content
PixelStack's documentation

Quick start

PixelStack is a platform to generate creatives dynamically, at scale.
Learn more about PixelStack’s features on pixelstack.io


Prerequisites

Create your first PixelStack design

  1. Copy a template

    To save you time, PixelStack offers plenty of templates for free.
    For this tutorial, let’s use the Podcast Poster template.
    Navigate to the template’s page, and click Use Template.

  2. Test the design

    To test the design with dynamic data, open the Test Center, by clicking the Test button on top right corner of the editor. And change the values of the object properties.
    For this tutorial, let’s select “title” in the Object field, and “Text” in the Property field, and set the Value to “PixelStack tutorial”. You’ll see that the preview design has changed to match the value your entered.

    Optional: You can save this test case by clicking the Create button.

  3. Open the design image in the browser

    Above the preview image, you’ll see a URL that gets automatically updated when you make changes to the property values. That’s the URL you can use to render this image anywhere.
    You can copy the URL by clicking the button, and open it in a new tab.

  4. Make changes directly in the URL

    The Test Center is there to help you build URLs but also to create and save test cases to make sure your design always look as expected with all possible data changes. You can also make changes to the URL directly in your browser.
    You can change the “PixelStack tutorial” in the URL to “I love PixelStack!”, and you can also change other objects, by adding & footer-text . text = Get it now to the URL.

After making any changes to the design (make sure to click the “Save” button), you can refresh the design image URL to see the updates.

Make dynamic changes in the Test Center PixelStack allows creating test cases to ensure your designs will look great in all the expected settings. To open Test Center, click the “Test Center”