Brail Devtools

⚠️

The below applies only to next.js applications. Devtools support will be expanded in the future.

The Brail Devtools make working with your templates easier, but are not strictly necessary.

The Devtools consists of a frontend and backend component.

Devtools UI

/* 📄 pages/_app.tsx */
import { AppProps } from "next/app"
import { Devtools } from "brail/devtools"
 
const _App = (props: AppProps) => {
	const { pageProps, Component } = props
 
	return <Devtools templates={templates}>
		 {/** 👇 Wrap app in devtools */}
		<Component {...pageProps}/>
	</Devtools>
 
}
 
export default _App;

Devtools Handler

/* 📄 pages/api/devtools/[trpc].ts */
import { createNextDevtoolsHandler } from "brail/next";
 
export default createNextDevtoolsHandler({ templates });

To ensure routing between templates works, we need to register Brail in the next.config file, if you haven't already.

import { withBrail } from "brail/next"
const brailConfig = {
	// Your brail config
}
 
export default withBrail(brailConfig)({ /** 👈 Add Brail plugin */
	/* Your next.js config */
});

For more information, see the next.js integration docs

Theming Linting