Flourish for developers
  • Flourish SDK
  • Flourish Live API
  • Embedding guide
  • Help

›Getting started

Introduction

  • Introduction to the Flourish SDK

Getting started

  • Getting started with the SDK
  • Working with settings
  • Working with data
  • Cloning visualizations
  • Using Flourish modules
  • Using Flourish with Javascript libraries and frameworks
  • Simple 5 minute template

API reference

  • SDK commands
  • File structure
  • Template configuration with template.yml
  • Structuring your template logic
  • Versioning your template
  • The window.Flourish object
  • Automatic assignment of columns to bindings

Using Flourish with Javascript libraries and frameworks

As Flourish templates have a simple structure, you can use front-end libraries and frameworks of your choice to develop them.

This section contains a few examples. We shall add more over time. If you’d like to contribute an example with your favorite library or framework, please get in touch at hello@flourish.studio.

Simple D3 template

This is a simple template example to create a bar chart. The bar chart is based on Mike Bostock's bar chart example here.

  • Find the code here

Simple React template

This simple example uses React to draw a specified number of colorful circles at random positions and sizes. It demonstrates the use of settings in a React context.

  • Find the code here

Simple Vue 2 template

This simple example uses Vue 2 to draw a specified number of colorful circles at random positions and sizes. It demonstrates the use of settings in a Vue 2 context.

  • Find the code here

Simple Vue 3 template

This simple example uses Vue 3 to draw a specified number of colorful circles at random positions and sizes. It demonstrates the use of settings in a Vue 3 context.

  • Find the code here

Simple Vue 3 template with TypeScript support

This simple example uses Vue 3 to draw a specified number of colorful circles at random positions and sizes. It demonstrates the use of settings in a Vue 3 context with TypeScript support.

  • Find the code here

Simple petite-vue template

This simple example uses petite-vue to draw a specified number of colorful circles at random positions and sizes. It demonstrates the use of settings in a petite-vue context.

  • Find the code here

Simple Svelte template (by Rich Harris 💫)

This simple example uses Svelte to draw a specified number of colorful circles at random positions and sizes. It demonstrates the use of settings in a Svelte context.

  • Find the code here

Simple Svelte template with TypeScript support

This simple example uses Svelte to draw a specified number of colorful circles at random positions and sizes. It demonstrates the use of settings in a Svelte context with TypeScript support.

  • Find the code here

Election results chart template

This example is a public Flourish template repository to showcase how a Flourish template can be structured and built using the Flourish SDK. It demonstrates the use of incorporating Flourish modules into custom templates.

  • Find the code here
Last updated on 02/04/2024
← Using Flourish modulesSimple 5 minute template →
Copyright © 2025 Flourish