Skip to content

getting-started.md

Latest commit

 

History

History
64 lines (37 loc) · 3.69 KB

getting-started.md

File metadata and controls

64 lines (37 loc) · 3.69 KB
Raw
description Building your first Component
icon bolt

Quickstart

In this getting started guide we'll learn how to create a Component inside an Element DevPack, and then edit it and see the updates live in Elements.

{% hint style="success" %}

Download Code Samples from GitHub

A public GitHub repository containing a collection of official example Element Dev Packs is now available. These packs provide ready-to-use Components and configuration files you can explore, modify, and build upon to create your own custom Components for Elements. It’s the best place to learn by example and understand how a complete Dev Pack is structured. {% endhint %}

View Code Examples on GitHub

{% hint style="success" %} Prefer a written walkthrough? Follow the FAQ component tutorial — a four-part guide that builds a complete component with properties, collections, hooks, and Alpine.js interactivity. {% endhint %}

Installing an existing Dev Pack into Elements

A growing collection of example Dev Packs are available in our public GitHub repository. These can be downloaded and installed for use in Elements. To load an existing Dev Pack into Elements, follow the steps below.

  1. Launch Elements and open the app Settings window (command-,) and select the "Addons" panel.
  2. Click the "Add Pack" button to navigate to and select an existing Dev Pack. You should now see your chosen Dev Pack in the Installed Addons list view. You cna now close the Settings window.
  3. Open an existing document (or create a new one), and navigate to the Components panel, the components inside of the dev pack you added should now be listed and can be added to your project.

Watch the short video below to see how to install an Element Dev Pack.

{% embed url="https://youtu.be/qGxY-toYjdY" %}

Creating an Element Dev Pack & Component

The boilerplate code for an Element Dev Pack (and Component) can be created inside Elements.

Go to Elements > Settings > Addons and click the "Create Pack" button in the bottom left had corner of the window. You will then be prompted to enter information about your pack, such as developer name and title, along with a location to save the Dev Pack.

Watch the short video below to see how to create an Element Dev Pack including a Component.

{% embed url="https://youtu.be/wFXaFmr4kmg?si=QJDFotPPgf6Lb7ZZ" %}

Editing the Component

The following video will show you how to edit your newely created component with your favourite text editor. In this video we use Nova from Panic but it will work exactly the same with VS Code, BBEdit, or any other text editor.

{% embed url="https://youtu.be/gRWb-GBDiPk" %}

Adding Assets to a Component

The following video shows how you can add extra files for use in your Component. This videos shows adding a JS file and linking to it from the page template.

You can also add shared files that can be used by all the components in a pack. This videos focuses on page level Assets.

{% embed url="https://youtu.be/zegch8Rd4uw" %}

Add a Custom Icon to your Component

Adding a custom icon to your Components gives them an extra level of polish, while making them easier to find visual in Elements.

Watch the short video below to learn more about adding custom icons to your Components.

{% embed url="https://www.youtube.com/watch?v=qZOiHiWnjW8" %}