MIT License
Copyright © 2020


Besides the theme and the config, you can customize how CODEDOC looks and behaves by using custom layout components. Codedoc uses TSX-based components for all layout elements, and you can start modifying them simply by changing the content of .codedoc/content/index.tsx:

1linkimport { RendererLike } from '@connectv/html'; // @see [CONNECTIVE HTML](

2linkimport { File } from 'rxline/fs'; // @see [RxLine](

3linkimport { Page, Meta, ContentNav, Fonts, ToC, GithubSearch$ } from '@codedoc/core/components'; // --> default layout components from codedoc


5linkimport { config } from '../config'; // --> configuration of the project

6linkimport { Header } from './header'; // --> your own header component

7linkimport { Footer } from './footer'; // --> your own footer component



10linkexport function content(_content: HTMLElement, toc: HTMLElement, renderer: RendererLike<any, any>, file: File<string>) {

11link return (

12link <Page title={, config, file)} {/* --> set title based on config */}

13link favicon={} {/* --> set faviocn based on config */}

14link meta={<Meta {}/>} {/* --> set meta based on config */}

15link fonts={<Fonts {}/>} {/* --> set fonts based on config */}


17link scripts={} {/* --> add scripts from config */}

18link stylesheets={} {/* --> add stylesheets from config */}


20link header={<Header {...config}/>} {/* --> use the header component */}

21link footer={<Footer {...config}/>} {/* --> use the footer component */}

22link toc={ // --> the ToC component

23link <ToC search={ // --> configure ToC search based on GitHub config

24link config.misc?.github ?

25link <GithubSearch$

26link repo={config.misc.github.repo}

27link user={config.misc.github.user}

28link root={config.src.base}

29link pick={config.src.pick.source}

30link drop={config.src.drop.source}

31link /> : false

32link }>{toc}</ToC>

33link }>

34link {_content} {/* --> display the content of each page */}

35link <ContentNav content={_content}/> {/* --> the content nav element */}

36link </Page>

37link )


touch_app NOTE

Despite the TSX syntax, CODEDOC components are not React components. The component library used by codedoc is CONNECTIVE SDH, which is a more close-to-DOM-api library for creating JAMStack apps.

Learn More

linkOverriding Default Layout

As you can see from the code, you can simply create your own custom layout elements and use them instead of the default ones:

1linkimport { CodedocConfig } from '@codedoc/core';

2linkimport { Footer as _Footer } from '@codedoc/core/components';



5linkexport function Footer(config: CodedocConfig, renderer: any) {

6link return <_Footer>I prefer an empty footer</_Footer>;


However, since CODEDOC's default layout elements sometimes have specific interactions with each other, with codedoc bundle's initialization scripts and generally with codedoc features, it is a good idea to look at the source code of the default layout component you want to override first.

warning WARNING

Your custom layout elements might not work with codedoc features if some specific properties of them are missing. So DO CHECK the source of the original layout components before writing and using your own custom ones.

Check out the Source Codes


For convenience, recipes for most common customizations are included in these docs. If you however cannot find a neat solution to the particular customization you have in mind, do not hesitate to ask (for example in our community). Additionally, if you have your own customization recipe that you think will be useful for other people using CODEDOCC, it would be extremely nice of you if you could contribute to these docs and add your recipes!

Contribute to the Docs!
CustomizationOverriding Default LayoutRecipes

Home Overview CLI Theme

Code Featureschevron_right

Images & Assets