Bundle Structure

An Element is a bundled folder

Elements require a specific directory structure in order to work correctly, these are called Bundles in macOS.

Element bundles are directory hierarchies, with the top-level directory having a name that ends with a .elementsdevpack extension.

The Pro version of RapidWeaver Elements is required to build and develop Elements.

Dev Pack Bundle Structure

The following outlines the folder structure supported by elements — Only bold items are required for a basic Element to function inside of RapidWeaver.

An Element pack can contain multiple components, each Element should be placed in the "elements" folder inside the main bundle.

• HelloWorld.elementsdevpack (bundle)

• components (folder)

  • info.json

  • com.yourcompany.component.helloworld (folder)

    • hooks.js

    • icon.icns

    • icon-dark.icns

    • info.json

    • paletteIcon.png

    • paletteIcon-dark.png

    • properties.json

    • assets (folder)

      • page (folder)

    • templates (folder)

      • index.html

      • each (folder)

        • index.html

        • styles.css

      • include (folder)

        • extra.html

      • page (folder)

        • page.html

  • com.yourcompany.component.foobar (folder)

  • shared (folder)

    • assets (folder)

    • hooks (folder)

    • templates (folder)

Dev Pack with Multiple Elements

An Element pack can have multiple addons inside of it, including components and themes, here's an example structure:

• yourAddons.elementsdevpack (bundle)

• info.json

• components (folder)

  • com.yourcompany..image (folder)

  • com.yourcompany..navbar (folder)

• themes (folder)

  • com.yourcompany..themes.architect (folder)

  • com.yourcompany..themes.solar (folder)