obsidian-components

Features

• Custom render elements created by the user.
• Granular control over which component are allow to run.
• Support for custom codeblocks name.
• Design Mode (Hot-Module-Reload)
• Full User Styling

Instalation

From source

You can activate this plugin, building from source by doing the following:

• Clone the repository
• Install the dependencies
• Run pnpm build or npm run build from a cli
• Copy the content of the repository dist folder to your vault, the path should look like your-vault/.obsidian/plugins/obsidian-components
• Open your vault in Obsidian and activate the newly installed plugin

From within Obsidian

I'm working ⚒️ on making this posible.

Usage

Codeblock syntax

All the Codeblocks support the use of YAML and JSON. So the next two Codeblocks will generate the same output.

```use book
title: Lord of the rings
author: J. R. Tolkien
```

```use book
{
	"title": "Lord of the rings",
	"author": "J. R. Tolkien"
}
```

If Dataview is installed and enabled the obsidian syntax can also bee used

```use books
TABLE title, author FROM "books"
```

Custom Codeblocks

This behavior is disabled by default and can be enabled with the Custom Codeblocks Setting.

The custom Codeblocks allow a user to use components avoiding the use word. It uses the components custom names defined by the user instead. Example:

```book
title: 'Cien años de Soledad'
author: 'Gabriel García Márquez'
```

Supported Components Syntax

Each supported syntax can be enabled as a format on the settings. The formats defines how each component file is handled.

• HTML Components are defined using HTML.
• Markdown Components are defined using Markdown.
• Javascript_HTML Components are defined using Javascript and should return a HTML string.
• Javascript_Markdown Components are defined using Javascript and should return a Markdown string.
• Javascript_code Components are defined using Javascript and works over the runtime elements.

Dataview Support

When a Dataview query is identified, it is queried against Dataview Plugin and the result is piped into the Component.

The piped values can be checked with the successful flag, when something fails something similar to the next object is passed.

{ successful: false, value: undefined }

For details on the passed data structure, check documentation of Dataview.

Pricing

This plugin is provided to everyone for free, however if you would like to say thanks or help support continued development, feel free to send a little through the following method:

Notes

The plugin is not on active development, new features or changes are developed when there is an oportunity. But issues and bugs will have especial priority.

Obsidian Mobile

There is no current support for Obsidian mobile.