In this tutorial, youll learn how to recreate the Weebly Price Chart element app, package it up, and test it. This element displays a given number of price plans, each with a given number of features available at that price point.

Weebly Price Chart
The Weebly Price Chart

You’ll learn how to:

  • Follow Weebly best practices for designing an element
  • Register an app
  • Create the needed directory structure
  • Create the apps manifest, including the configuration settings needed for the element to function properly
  • Create the HTML, CSS, and JavaScript files for the element
  • Package up the app and install it to a test site

Time to complete: About 45 minutes

User experience: Intermediate web design with knowledge of CSS


  • The Price Chart sample application We’ll be recreating this application in this tutorial. Youll need the files to compare your work, and in some cases, to complete a step. Download the app’s zip file from our Git repository and unzip it to a local directory.
  • You’ll need assets to advertise the app in the Weebly App Center. These are also available from a Git repo. Download them here and unzip to the same directory as the app files.
  • A code editor that can handle HTML, JavaScript, CSS, and JSON

Help make these docs better!