TSX Docs

You can edit tsx-docs.config.js to customise your docs. It's generated for you and it's located at the root of the project.



You should edit the meta information on tsx-docs.config.js with your project information.

// tsx-docs.config.js

// project name
title: '',
// project description
description: '',
// author / copyright holder displayed on footer
author: '',
// (optional) author / copyright holder URL display on footer
authorURL: '',


The routes defined in tsx-docs.config.js are used to populate the sidebar. The routes don't have to be pointing just to the app, feel free to point to any URL (e.g Github repo).

The app title always links to / so you can rely on that for navigating to the project home (if you feel it's sufficient).

// tsx-docs.config.js

routes: [
	// supports internal routes (prefetched, etc)
		name: 'Example Page',
		path: '/example',
	// and also external routes
		name: 'Github',
		path: 'https://github.com/petecorreia/tsx-docs',


Theming is powered by Rebass Theming.

Simply edit the theme property on tsx-docs.config.js

// tsx-docs.config.js

// Default Rebass theme, feel free to edit
theme: {
	breakpoints: ['550px', '769px', '1024px'],
	fontSizes: [12, 14, 16, 20, 24, 32, 48, 64],
	space: [0, 4, 8, 16, 32, 64, 128, 256],
	colors: {
		blue: '#000',
		gray: '#666',
		lightgray: '#aaa',

You can find more information about the available properties in the Rebass documentation.

Next.js Configuration

TSX Docs is powered by Next.js so you can add configuration for it either via tsx-docs.config.js (recommended) or directly via next.config.js.

// tsx-docs.config.js

nextConfig: {
	assetPrefix: 'https://example.com'

You can find more information about the available properties in the Next.js documentation.