Random component references
These are random components
Frame of Work: Quick Start
Getting Started with Frame of Work
Frame of Work has different parts:
Browse and buy from our collection of professionally designed quote templates that integrate seamlessly with HubSpot.
Create an account and connect your HubSpot portal to access your purchased templates.
Our templates are built for easy installation with your HubSpot portal, with minimal technical knowledge required.
Use your new templates directly in HubSpot to create beautiful, professional quotes that impress clients and close deals.
Read our in-depth What is Frame of Work introduction.
Terminology
Markdown/MDX: Markdown is a markup language for creating formatted text. Fumadocs supports Markdown and MDX (superset of Markdown) out-of-the-box.
Although not required, some basic knowledge of Next.js App Router would be useful for further customisations.
Automatic Installation
A minimum version of Node.js 18 required, note that Node.js 23.1 might have problems with Next.js production build.
npm create fumadocs-apppnpm create fumadocs-appyarn create fumadocs-appbun create fumadocs-appIt will ask you:
- the React.js framework to use (the docs is only written for Next.js).
- the content source to use.
A new fumadocs app should be initialized. Now you can start hacking!
You can follow the Manual Installation guide to get started.
Enjoy!
Create your first MDX file in the docs folder.
---
title: Hello World
---
## Yo what's upRun the app in development mode and see http://localhost:3000/docs.
npm run devpnpm run devyarn devbun run devExplore
In the project, you can see:
lib/source.ts: Code for content source adapter,loader()provides the interface to access your content.app/layout.config.tsx: Shared options for layouts, optional but preferred to keep.
| Route | Description |
|---|---|
app/(home) | The route group for your landing page and other pages. |
app/docs | The documentation layout and pages. |
app/api/search/route.ts | The Route Handler for search. |
Writing Content
For authoring docs, make sure to read:
Fumadocs has some additional features for authoring content.
Learn how to customise navigation links and sidebar items.
Learn how to organise content.
Content Source
Content source handles all your content, like compiling Markdown files and validating frontmatter.
A source.config.ts config file has been included, you can customise different options like frontmatter schema.
Read the Introduction for further details.
Fumadocs is not Markdown-exclusive. For other sources like Sanity, you can build a custom content source.
Customise UI
See Customisation Guide.
FAQ
Some common questions you may encounter.
##Ready to Get Started?
Browse our template collection today and transform your HubSpot quotes into professional, deal-closing assets.
Learn More
New to here? Don't worry, we are welcome for your questions.
If you find anything confusing, please give your feedback on Github Discussion!