At Bruno, we're on a mission to reinvent the API client. When we think of that, it's not just about...
Documentation is often the first stop when learning a new tool, language, or platform. In fact, StackOverflow's 2024 Developer Survey showed that for the over 48,000 developers who responded, documentation was the first place they visited.
Ideally, documentation should be comprehensive and include code samples, easy-to-understand definitions, architecture or flow diagrams, and even some quick product demos.
Let's be honest though - it's sometimes difficult to cover all use cases and keep up things up-to-date. This only increases when a product has frequent releases like Bruno.
Thankfully, like the product itself, Bruno's documentation is open-source and on Github. This means you can also contribute to improving the documentation with a cool use case you think the community should see or potentially if you find it missing something.
In this guide, I will walk you through how you can set up Bruno's documentation locally and make a first contribution!
Overview of the Technologies
Before diving into the setup and configuration, let’s take a look at the technologies behind the Bruno documentation.
| Framework | Language |
|---|---|
 |
 |
Nextra: Nextra is a static site generator built on Next.js to create content-based documentation, personal blogs, and websites. Bruno's documentation uses Nextra V3.
Markdown: Markdown is a lightweight markup language with plain text formatting syntax. It is easy to use and format documentation with simple syntax.
That’s all you need to know! Easy as that.
How to Setup Bruno Documentation Locally
Prerequisites
Before setting up the project configuration, let’s understand the prerequisites you need:
Once these are installed, you're ready to proceed with setting up the Bruno documentation.
Install and Run Bruno Documentation Locally
The setup and configuration are straightforward. All you need is a GitHub account—create one if you don't already have one. Follow the steps below to set up Bruno documentation on your local machine.
1. Navigate to the Bruno Documentation repository and click on the FORK button.
2. Once you click on the fork, you’ll be redirected to your GitHub account, where you need to fill in basic details.
3. Once the fork is available, click on the Code button and copy the HTTPS URL.
4. Navigate to the location on your local machine where you want to store the Bruno documentation project.
5. Open your code editor (VS Code) and launch the terminal.
6. Run the following command in terminal-1:
git clone https://github.com/<github-username>/bruno-docs.git7. Now you’ll see a new folder (bruno-docs) created, which includes all the folders and files in your system.
Running the Bruno Documentation Locally
Once you have set up the project, follow these steps to run the Bruno documentation repo:
1. Install all required dependencies by running the following command:
npm install2. To run the project locally, use the following command:
npm run dev3. Now, open your browser and navigate to http://localhost:3000, and you will see the project running live.
Setting Up the Development Workflow
After setting up the project and configuring it, we need to establish the development workflow as contributors. This will allow you to work on new documentation, improve existing ones, and fix bugs. Follow the steps below:
1. Make sure your app is running in the background in terminal-1, and open a second terminal. Run the following commands:
Check available remotes (to know which repositories are connected):
1. Create and switch to a new branch for your workflow:
git checkout -b docs/fix-typosTip: while you can name your branches anything, it’s good practice to follow naming conventions such asfeat/feature-nameorfix/bug-name.
2. Add your changes to the staging area:
git add .3. Commit your changes with a meaningful message:
git commit -m "fix typos"4. Push your changes to the remote repository:
git push origin What's Next
In this guide, we learned how to set up the Bruno documentation repository locally, the prerequisites, and how to set up the development workflow. The next step is to familiarize yourself with Nextra and explore the UI components it offers, as well as dive into the Markdown language used for writing documentation.
By understanding these technologies, you’ll be better equipped to contribute to the documentation, improve existing content, and add new features as needed. Get ready to enhance the Bruno docs and make it even more helpful for the community!
