Docs
Learn
v.Latest
Documentation
Visual Editing Router
Table of Contents
By default, clicking on a document from the Collection list takes you to the full-page editor.
Setting the ui.router property on a collection creates a link to the visual editor instead.
.gif)
ui.router Usage
The router property is a function that should return either the page path as a string, or undefined to go to the default editor.
router: ({collection: Collection,document: Document}) => string | undefined
The function is run when a document is clicked in the Collection list.
Examples
Homepage routing
Returning / (home route) or a specific slug from the router function will link to that page with Visual Editing active.
{name: 'page',label: 'Page',path: 'content/page',format: 'md',ui: {router: ({ document }) => {// navigate to the home pageif (document._sys.filename === 'home') {return '/'}// navigate to the about pageif (document._sys.filename === 'about') {return `/about`}return undefined},},fields: [],}
Filename-dependent routing
It's possible to associate the routing to be based on document filenames, or programmatically.
{label: 'Blog Posts',name: 'post',path: 'content/posts',format: 'mdx',ui: {router: ({ document }) => {return `/post/${document._sys.filename}`},},fields: [],}
© TinaCMS 2019–2025