Compose Components
Blocklets can be composed into larger, more complex applications by defining other blocklets as components. This powerful feature allows you to reuse functionality and build modular systems. Component relationships are managed within the components section of your blocklet.yml file.
The Blocklet CLI provides two main commands to simplify this process: blocklet add and blocklet remove.
This guide will walk you through how to use these commands to manage your blocklet's dependencies.
Add a Component#
The blocklet add command fetches a component blocklet and adds it as a dependency to your current blocklet's blocklet.yml file.
You can add a component from the official Blocklet Store or directly from a URL.
Usage#
blocklet add <name[@version]|url> [options]Arguments and Options#
Name | Description |
|---|---|
`<name[@version] | url>` |
| Sets a custom display title for the component within the parent blocklet. If omitted, the component's own title is used. |
| Specifies the URL path where the component will be accessible. If omitted, a URL-friendly path is generated from the component's name (e.g., a component named |
| Specifies a custom Blocklet Store URL to fetch the component from, overriding the default configured store. |
Examples#
Adding a Component from the Blocklet Store#
To add the latest version of a component named my-analytics from the default Blocklet Store, run:
blocklet add my-analyticsUpon success, the CLI will add an entry to your blocklet.yml similar to this:
# blocklet.yml
name: my-app
# ... other properties
components:
- name: my-analytics
title: My Analytics
mountPoint: /my-analytics
source:
store: 'https://store.blocklet.dev/api'
name: my-analytics
version: latestAdding a Component with a Custom Mount Point#
If you want to add the same component but make it available at a different path, use the --mount-point option:
blocklet add my-analytics --mount-point /internal/statsThis will result in the following blocklet.yml configuration:
# blocklet.yml
components:
- name: my-analytics
title: My Analytics
mountPoint: /internal/stats # Custom path
source:
store: 'https://store.blocklet.dev/api'
name: my-analytics
version: latestRemove a Component#
The blocklet remove command removes a component dependency from your current blocklet's blocklet.yml file.
Usage#
blocklet remove <name>Arguments#
Name | Description |
|---|---|
| Required. The name of the component to remove. This must match the |
Example#
Imagine your blocklet.yml contains two components:
# blocklet.yml (before removal)
name: my-app
components:
- name: my-analytics
title: My Analytics
mountPoint: /internal/stats
source:
store: 'https://store.blocklet.dev/api'
- name: my-dashboard
title: My Dashboard
mountPoint: /dashboard
source:
store: 'https://store.blocklet.dev/api'To remove the my-analytics component, run the following command:
blocklet remove my-analyticsAfter the command executes, your blocklet.yml will be updated:
# blocklet.yml (after removal)
name: my-app
components:
- name: my-dashboard
title: My Dashboard
mountPoint: /dashboard
source:
store: 'https://store.blocklet.dev/api'The my-analytics entry is now gone.
By using blocklet add and blocklet remove, you can effectively manage the composition of your application. This modular approach is key to building scalable and maintainable systems with Blocklet.
For a full list of all available command options, see the detailed reference pages: