Trusted by modern launch teams

Skip to main content
DevAssistant Docs
Browse documentation
Build6 min read

Reusable components

Create reusable patterns, edit their source, and review updates before applying them across a site.

Where to find it

  1. Editor
  2. Components

In this guide

A reusable component whose source and page instances have clear responsibilities.

Before you start: Use a role with component-editing access. Start with a small pattern such as a button or service card.

On this page

Create a component from a selection

Components are useful when the same pattern appears in several places. The catalog shows versions and whether a component has unpublished changes.

Open a reusable component or drag it onto the canvas.
  1. 1Create component. Start blank or use selected layers.
  2. 2Component catalog. Open a source or insert an instance.

Open a reusable component or drag it onto the canvas.

  1. 1

    Select the pattern

    Select the root container of the pattern on the canvas or in Navigator. Check that the selection includes the content you intend to reuse.

  2. 2

    Open the component creator

    Choose Components, then Create component (+). Give it a descriptive name.

  3. 3

    Create from selection

    Choose Create from selection to use the selected layers. Use the blank-component option when starting a new pattern.

    You should see: The component appears in the catalog and its source can be opened for editing.

Edit the source and use an instance

The component source defines the reusable pattern. A page instance places that pattern into a page and can expose its supported controls.

  1. 1

    Open the source

    Click a component in the catalog. The header identifies the component being edited so you can distinguish it from a normal page.

  2. 2

    Edit and preview the pattern

    Use the canvas and Style controls, then preview the component. Publish the component when the reusable version is ready.

  3. 3

    Use it on a page

    Return to the page. Drag the component from the catalog onto the canvas. Select the instance to inspect its available properties.

Review shared changes

Before applying a newer version broadly, open the component’s actions menu and inspect its usage and version history. Check the proposed instance updates before applying them.

A library component may be read-only. Use the available local-copy/fork action when you need a site-owned version you can change. Check the catalog’s status message if a component cannot be opened.

Before you move on

  • The reusable source looks correct in preview.
  • Instance-specific content is retained.
  • The changed version is reviewed on representative pages.
  • A website release is published when the public site should receive the update.

Screenshots use a local sample workspace.

Hi there, how can we help?

Help centerSearch our knowledge base of how-to articlesEmail usEmail support at support@devassistant.io