Data Stack

Fernando Hurtado

Data Stack

Join the Community

Behaves like a Stack, but uses a JSON file as a data source so it can render a list of items.

Getting Started

Drop the DataStack component on the canvas and follow the instructions.

How does it work?

When connected to a data source (e.g. JSON file or URL), the Data Stack will find the top most array in the JSON file that looks like an array of React props and will pass it onto its children.


If the contents of the JSON are

  "root": {
    "items": [{ "name": "John" }, { "name": "Billy" }, { "name": "Charlie" }]

Then the DataStack will create one instance of the design component for each item. The generated react code will look approximately like this:

  <YourDesignComponent name="John" />
  <YourDesignComponent name="Billy" />
  <YourDesignComponent name="Charly" />

Similar Work

Special Thanks

Special thanks to Andry Birchwood for making the beautiful artwork.


  • Version: 1.6.0
  • Updated: 6 days ago
  • License: MIT


By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree