docs/User Guide/User Guide/Advanced Usage/Sharing.md
Trilium allows you to share selected notes as publicly accessible read-only documents. This feature is particularly useful for publishing content directly from your Trilium notes, making it accessible to others online.
<figure class="image"></figure>While the sharing feature is powerful, it has some limitations:
Some of these limitations may be addressed in future updates.
To use the sharing feature, you must have a <a class="reference-link" href="../Installation%20%26%20Setup/Server%20Installation.md">Server Installation</a> of Trilium. This is necessary because the notes will be hosted from the server.
Enable Sharing: To share a note, toggle the Shared switch within the note's interface. Once sharing is enabled, an URL will appear, which you can click to access the shared note.
Access the Shared Note: The link provided will open the note in your browser. If your server is not configured with a public IP, the URL will refer to localhost (127.0.0.1).
When you share a note, you actually share the entire subtree of notes beneath it. If the note has child notes, they will also be included in the shared content. For example, sharing the "Formatting" subtree will display a page with basic navigation for exploring all the notes within that subtree.
You can view a list of all shared notes by clicking on "Show Shared Notes Subtree" in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Global%20menu.md">Global menu</a>. This allows you to manage and navigate through all the notes you have made public.
To protect shared notes with a username and password, you can use the #shareCredentials attribute. Add this label to the note with the format #shareCredentials="username:password". To protect an entire subtree, make sure the label is inheritable.
The default design should be a good starting point, but you can customize it using your own CSS:
~shareCss relation to the note. If you want this style to apply to the entire subtree, make the label inheritable. You can hide the CSS code note from the tree navigation by adding the #shareHiddenFromTree label.#shareOmitDefaultCss label to avoid conflicts with Trilium's default stylesheet.You can inject custom JavaScript into the shared note using the ~shareJs relation. This allows you to access note attributes or traverse the note tree using the fetchNote() API, which retrieves note data based on its ID.
You can inject custom HTML snippets into specific locations of the shared page using the ~shareHtml relation. The HTML note should contain the raw HTML content you want to inject, and you can control where it appears by adding the #shareHtmlLocation label to the HTML snippet note itself.
The #shareHtmlLocation label accepts values in the format location:position:
head, body, contentstart, endFor example:
#shareHtmlLocation=head:start - Injects HTML at the beginning of the <head> section#shareHtmlLocation=head:end - Injects HTML at the end of the <head> section (default)#shareHtmlLocation=body:start - Injects HTML at the beginning of the <body> section#shareHtmlLocation=content:start - Injects HTML at the beginning of the content area#shareHtmlLocation=content:end - Injects HTML at the end of the content areaIf no location is specified, the HTML will be injected at content:end by default.
Example:
const currentNote = await fetchNote();
const parentNote = await fetchNote(currentNote.parentNoteIds[0]);
for (const attr of parentNote.attributes) {
console.log(attr.type, attr.name, attr.value);
}
To completely redesign the share, it is possible to create or use an existing custom share template.
Shared notes typically have URLs like http://domain.tld/share/knvU8aJy4dJ7, where the last part is the note's ID. You can make these URLs more user-friendly by adding the #shareAlias label to individual notes (e.g., #shareAlias=highlighting). This will change the URL to http://domain.tld/share/highlighting.
Important:
/) within aliases to create subpaths is not supported.[!TIP]
- To easily identify pages that don't have a share alias, run a <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Navigation/Search.md">Search</a> with
#!shareAlias.- To be able to enter the share alias faster, consider using <a class="reference-link" href="Attributes/Promoted%20Attributes.md">Promoted Attributes</a> (for example
#label:shareAlias(inheritable)="promoted,alias=Slug,single,text").
To customize the favicon for your shared pages, create a relation ~shareFavicon pointing to a file note containing the favicon (e.g., in .ico format).
You can designate a specific note or folder as the root of your shared content by adding the #shareRoot label. This note will be linked when visiting [http://domain.tld/share](http://domain/share), making it easier to use Trilium as a fully-fledged website.
[!TIP] Consider combining this with the
#shareIndexlabel, which will display a list of all shared notes.
When accessing a share, the sub-notes will be displayed in a tree on the left. But since multiple note trees can be shared, it might be useful to display a list of all the different share trees.
To do so, create a shared text note and apply the shareIndex label. When viewed, the list of shared roots will be displayed at the bottom of the note.
Sometimes it's useful to include a link to an external website alongside your shared notes — for example in the shared navigation or in an index. To do so, add the #shareExternalLink label to a note, with the target URL as its value (e.g. #shareExternalLink="https://example.com").
Any link pointing to this note will then redirect to the external website and open in a new browser tab, instead of opening the note's own shared page. This applies to:
#shareIndex label;The URL must be absolute and include the scheme (e.g. https://).
[!NOTE] The note still exists in the share tree and its own page remains reachable by its direct URL — the label only changes how links to it behave.
It's possible to adjust the logo which is displayed on the top-left of the left pane.
| Attribute | Description |
|---|---|
~shareLogo | Relation set to an image to use as logo. The image must be part of the share tree (it can be hidden if needed). |
#shareLogoWidth | The width (in pixels, without unit) to set for the logo. Default is 53. |
#shareLogoHeight | The height (in pixels, without unit) to set for the logo. Default is 40. |
#shareRootLink | URL to navigate to when the logo is pressed. |
| Attribute | Description |
|---|---|
#shareOpenGraphColor | This adjusts the theme-color meta-property. |
#shareOpenGraphURL | This adjusts the og:url and twitter:url meta-properties. |
#shareOpenGraphDomain | Adjusts the twitter:domain meta-property. |
#shareOpenGraphImage | |
~shareOpenGraphImage | Can be either a label, case in which the value is passed on as-is, or it can be a relation to an image <a class="reference-link" href="../Note%20Types/File.md">File</a>. This controls the og:image meta-property. |
Since v0.95.0, a new theme was introduced (and enabled by default) which greatly improves the visual aspect of the Share feature, as well as its functionality (such as mobile support, dark/light mode, collapsible tree, etc.). This theme is an adaptation of the Trilium Rocks! by zerebos.