Skip to main content

Blueprints & Templating

Blueprints form the architectural foundation of Bloxsnap. Instead of creating pages ad-hoc, developers use Blueprints to define component code, block structural requirements, and field rules. This guide covers how to design reusable master stencils and manage blueprint migrations using the Blueprint Propagator.

📐 Understanding Blueprint Architecture​

A Blueprint acts as the code definition layer. When you create a blueprint, you are creating a definition for an instance of a Block based on:

  • Custom Code. The Custom Code is referring to the HTML, CSS, and JS of the Blueprint.
  • Elements. Elements define exactly which visual fields (e.g., text inputs, switches, images) and Content a user is permitted to interact with on the canvas.
A Note on Blocks

Blocks are instances of Blueprints. Changing the Blueprint Code will change the Code for all of its blocks. However, each Block does have its own Content.

Sharing & Reusability Scopes​

To help agencies and large development teams scale operations, Blueprints can be saved into three separate collections:

  1. Website Blueprints: Restricted exclusively to the current website environment.
  2. Personal Blueprints: Bound to your unique profile to quickly roll out custom boilerplates across separate projects.
  3. Organization Blueprints: Synchronized across your entire workspace team registry, establishing strict corporate design patterns and shared integrations.

🚀 The Blueprint Propagator​

When managing a fleet of client websites, repeating identical structural setups or custom code implementations on a site-by-site basis is an unnecessary bottleneck.

The Blueprint Propagator allows you to instantly migrate a complete Blueprint architecture—including its underlying schema configurations, custom component code, and active content payloads—from one environment to another using a unified JSON transfer layer.

Common Use Cases​

  • Sharing Agency Integrations: Instantly distribute pre-built blueprint setups containing pre-configured tools (like forms or partner webhooks) across separate client projects.
  • Enforcing System Upgrades: Synchronize code-level schema modifications across independent website instances.
  • Cloning Structural Component Blocks: Replicate highly complex visual layouts alongside their pre-filled editor content safely without manual reconstruction.

How to Use the Blueprint Propagator​

  1. Navigate to the source Recipe or Website where the modified Blueprint lives.

    Make Modifications from a Recipe

    It is highly recommended to make structural architectural modifications directly inside a Recipe.

    This ensures that all future website containers instantiated from that Recipe automatically include your structural upgrades.

  2. Once you have saved your changes inside the Blueprint Editor, return to the Blocks modal, and locate your modified Blueprint.

  3. Click the 3 dots icon next to the Blueprint and select Copy. This packs the schema footprint, code, and content payloads into a compressed JSON object on your clipboard.

  4. Navigate out of the project and open the destination Website where you need to deploy the update.

  5. Open the Blocks modal on the destination Website interface.

  6. Scroll to the bottom of the pane and click Paste blueprint JSON.

  7. The architecture will immediately save the migrated Blueprint, custom component attributes, and localized data into the destination Website's collection.

  8. After that, you can use it like any other blueprint. Try adding it to the page!