Getting Started
Building your first Component
Last updated
Was this helpful?
Building your first Component
Last updated
Was this helpful?
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.
A growing collection of example Dev Packs are available in our public . These can be downloaded and installed for use in Elements. To load an existing Dev Pack into Elements, follow the steps below.
Launch Elements and open the app Settings window (command-,) and select the "Addons" panel.
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.
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.
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.
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.
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.
The following video will show you how to edit your newely created component with your favourite text editor. In this video we use but it will work exactly the same with VS Code, BBEdit, or any other text editor.
You can also that can be used by all the components in a pack. This videos focuses on .