Normally on the web, we write layout code using HTML which looks something like the following:
An Example Component
Component files are written in
.tsx files that live in the
quartz/components folder. These are re-exported in
quartz/components/index.ts so you can use them in layouts and other components more easily.
Each component file should have a default export that satisfies the
QuartzComponentConstructor function signature. It’s a function that takes in a single optional parameter
opts and returns a Quartz Component. The type of the parameters
opts is defined by the interface
Options which you as the component creator also decide.
In your component, you can use the values from the configuration option to change the rendering behaviour inside of your component. For example, the component in the code snippet below will not render if the
favouriteNumber option is below 0.
The Quartz component itself (lines 11-17 highlighted above) looks like a React component. It takes in properties (sometimes called props) and returns JSX.
All Quartz components accept the same set of props:
fileData: Any metadata plugins may have added to the current page.
fileData.slug: slug of the current page.
fileData.frontmatter: any frontmatter parsed.
tree: the resulting HTML AST after processing and transforming the file. This is useful if you’d like to render the content using hast-util-to-jsx-runtime (you can find an example of this in
allFiles: Metadata for all files that have been parsed. Useful for doing page listings or figuring out the overall site structure.
displayClass: a utility class that indicates a preference from the user about how to render it in a mobile or desktop setting. Helpful if you want to conditionally hide a component on mobile or desktop.
Quartz components can also define a
.css property on the actual function component which will get picked up by Quartz. This is expected to be a CSS string which can either be inlined or imported from a
Note that inlined styles must be plain vanilla CSS:
Imported styles, however, can be from SCSS files:
Quartz does not use CSS modules so any styles you declare here apply globally. If you only want it to apply to your component, make sure you use specific class names and selectors.
Scripts and Interactivity
What about interactivity? Suppose you want to add an-click handler for example. Like the
.css property on the component, you can also declare
.afterDOMLoaded properties that are strings that contain the script.
For those coming from React, Quartz components are different from React components in that it only uses JSX for templating and layout. Hooks like
useState, etc. are not rendered and other properties that accept functions like
onClickhandlers will not work. Instead, do it using a regular JS script that modifies the DOM element directly.
As the names suggest, the
.beforeDOMLoaded scripts are executed before the page is done loading so it doesn’t have access to any elements on the page. This is mostly used to prefetch any critical data.
.afterDOMLoaded script executes once the page has been completely loaded. This is a good place to setup anything that should last for the duration of a site visit (e.g. getting something saved from local storage).
If you need to create an
afterDOMLoaded script that depends on page specific elements that may change when navigating to a new page, you can listen for the
"nav" event that gets fired whenever a page loads (which may happen on navigation if SPA Routing is enabled).
It is best practice to track any event handlers via
window.addCleanup to prevent memory leaks.
This will get called on page navigation.
Of course, it isn’t always practical (nor desired!) to write your code as a string literal in the component.
Quartz supports importing component code through
Additionally, like what is shown in the example above, you can import packages in
.inline.ts files. This will be bundled by Quartz and included in the actual script.
Using a Component
After creating your custom component, re-export it in
Then, you can use it like any other component in
Component.YourComponent(). See the layout section for more details.
As Quartz components are just functions that return React components, you can compositionally use them in other Quartz components.
quartz/componentsfor more examples of components in Quartz as reference for your own components!