diff --git a/docs/framework/custom-components.mdx b/docs/framework/custom-components.mdx
index 23152de51..a37c26417 100644
--- a/docs/framework/custom-components.mdx
+++ b/docs/framework/custom-components.mdx
@@ -7,10 +7,10 @@ It's possible to extend Framework with custom component templates.
They're developed using Vue 3 and TypeScript. Once transpiled, they can be used by copying them to the `extensions/` folder of any project.
- Custom components behave exactly like built-in ones. They are just as
- performant, can contain other components, and offer the same the Builder
- experience. They only differ from built-in components in the way that they're
- bundled and imported.
+ Custom components behave exactly like built-in ones. They are just as
+ performant, can contain other components, and offer the same the Builder
+ experience. They only differ from built-in components in the way that they're
+ bundled and imported.
## Architecture
@@ -101,39 +101,41 @@ The code above will make Bubble Message available in the Builder.
### Run a local server
-
- To get started, clone the [Framework
- repository](https://github.com/writer/writer-framework) from GitHub.
-
-
- To develop custom templates in a developer-friendly way, ensure you have a
- front-end development server with instant reload capabilities. The front-end
- code for Framework is located in the `ui` folder. With Node and npm
- installed on your system, run `npm install` to install dependencies. Then,
- start the server with support for custom component templates using `npm run
- custom.dev`. ```sh cd ui npm install # "custom.dev" links templates in
- "custom_components/" # "dev" runs the server without them npm run custom.dev
- ```
-
-
- The command `npm run custom.dev` starts a front-end server, which requires a
- back-end to function fully. Start Framework via command line, specifying the
- option `--port 5000`, to provide a back-end on that port. It's recommended
- to create a new app for testing the template you're developing. ```sh writer
- create customtester writer edit customtester --port 5000 ```
-
-
- You should now be able to access Framework via the URL provided by Vite,
- e.g. `http://localhost:5174`. In the Builder's _Toolkit_, you should see the
- sample component, _Balloon Message_. Add it to your tester application.
-
+
+ To get started, clone the [Framework
+ repository](https://github.com/writer/writer-framework) from GitHub.
+
+
+ To develop custom templates in a developer-friendly way, ensure you have a
+ front-end development server with instant reload capabilities. The front-end
+ code for Framework is located in the `ui` folder. With Node and npm
+ installed on your system, run `npm install` to install dependencies. Then,
+ start the server with support for custom component templates using `npm run
+ custom.dev`.
+
+ ```sh cd ui npm install # "custom.dev" links templates in
+ "custom_components/" # "dev" runs the server without them npm run custom.dev
+ ```
+
+
+ The command `npm run custom.dev` starts a front-end server, which requires a
+ back-end to function fully. Start Framework via command line, specifying the
+ option `--port 5000`, to provide a back-end on that port. It's recommended
+ to create a new app for testing the template you're developing. ```sh writer
+ create customtester writer edit customtester --port 5000 ```
+
+
+ You should now be able to access Framework via the URL provided by Vite,
+ e.g. `http://localhost:5174`. In the Builder's _Toolkit_, you should see the
+ sample component, _Balloon Message_. Add it to your tester application.
+
### Create a new component
- You can also have a look at the built-in component templates, since their
- syntax is equivalent. They can be found in the `ui/src/components/` folder.
+ You can also have a look at the built-in component templates, since their
+ syntax is equivalent. They can be found in the `ui/src/components/` folder.
Go to `ui/src/custom_components/` and open the Vue single-file components, i.e. the
`.vue` files. These files contain comments that will help you get started. Try editing
@@ -154,8 +156,8 @@ import BubbleMessageAdvanced from "./BubbleMessageAdvanced.vue";
// Export an object with the ids and the templates as default
export default {
- bubblemessage: BubbleMessage,
- bubblemessageadvanced: BubbleMessageAdvanced,
+ bubblemessage: BubbleMessage,
+ bubblemessageadvanced: BubbleMessageAdvanced,
};
```