Skip to content


The EarlyBird Playground is a specialized online development environment for developers to create and share templates for EarlyBird. This platform is inspired by the TailwindCSS Playground and aims to foster creativity and collaboration among developers.

EarlyBird Playground


  • Code completion: The EarlyBird Playground provides a common feature in many code editors (IDEs) where the editor helps to auto-complete your code, to reduce typos and speeding up the development process.
  • Instant preview: The instant preview feature would allow you to immediately see the results of your code without having to manually refresh your browser.
  • Responsive inspection: Enable developers to switch between different devices (PC, tablet, and mobile) to evaluate the landing page's performance on various screen sizes.

How to use the EarlyBird Playground

The EarlyBird Playground functions by utilizing a combination of HTML, CSS, and JSON for configuration. Here's a brief rundown of how to use these:

  1. HTML: This is used to define the structure of your landing page template. It allows you to layout your elements and define their hierarchy.
  2. CSS: This is used to style your elements. You can adjust colors, fonts, and layout to make your template visually appealing.
  3. Config (JSON): This is used to define certain parameters and settings for your template. It provides a level of customization and flexibility to your design.


In EarlyBird Playground, developers can set variables in their templates. This feature allows for dynamic content customization, enhancing the flexibility and adaptability of the design process.

All defined variables can be conveniently referred to from the top right corner of the code editor, streamlining the design process.

EarlyBird variables