{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"create-react-pages","__idx":0},"children":["Create React pages"]},{"$$mdtype":"Tag","name":"ConfigOptionRequirements","attributes":{"products":["Revel","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Markdown is the primary format for creating content in Redocly projects, but React pages offer additional flexibility."," ","Use React pages for dynamic content, complex layouts, or advanced interactivity."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This guide shows you how to create a React page in your Redocly project (Realm or Revel)."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"before-you-begin","__idx":1},"children":["Before you begin"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Make sure you have the following:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["a Revel or Realm project running locally"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["basic knowledge of React"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"create-a-new-react-page","__idx":2},"children":["Create a new React page"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Render React code as an independent page by adding the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".page.tsx"]}," suffix on the filename."," ","Similar to Markdown pages, React pages use file-based routing and can be located anywhere in a project."]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["See how React pages are used in a project"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["It's common for projects to have both Markdown and React pages, as in the following example project structure:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"treeview","data-title":"Project with multiple page types","header":{"title":"Project with multiple page types","controls":{"copy":{}}},"source":"your-awesome-project/\n├── @theme/\n├── static/\n├── guides/\n│ ├── example-guide.md\n│ └── pricing.page.tsx\n├── about/\n│ ├── index.page.tsx\n│ └── ContactForm.tsx\n├── index.md\n├── redocly.yaml\n└── ...\n","lang":"treeview"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In this example, the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ContactForm.tsx"]}," file defines a component imported by other pages."," ","It ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["doesn't render as a page"]}," because the file doesn't have a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".page.tsx"]}," suffix."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To create a React page, add a new file to the root of your project named ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["example.page.tsx"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"add-content-to-react-page","__idx":3},"children":["Add content to React page"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add content to the new page by creating a React component."," ","View the page in your local preview."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example content is for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["example.page.tsx"]},", which can be viewed at ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/example"]},":"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","data-title":"example.page.tsx","header":{"title":"example.page.tsx","controls":{"copy":{}}},"source":"import React from 'react';\nimport styled from 'styled-components';\n\nexport default function () {\n return (\n \n

Example React page

\n

Hello world!

\n \n );\n}\n\nconst Wrapper = styled.div`\n padding: 40px;\n`;\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Your IDE may show a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Cannot find module..."]}," linting error for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["react"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styled-components"]},"."," ","You have two options:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Ignore them; the modules resolve when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["npx @redocly/cli preview"]}," runs."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Remove the errors by installing a local version of your Redocly product -- ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@redocly/realm"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@redocly/revel"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"set-front-matter-for-a-react-page","__idx":4},"children":["Set front matter for a React page"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Set the React page's ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config/front-matter-config"},"children":["front matter"]}," by exporting a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["frontmatter"]}," object."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Front matter is used to set page metadata or configure page behavior, as in the following list of examples:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Hide ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config/navbar"},"children":["navbar"]}," and ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config/footer"},"children":["footer"]}," elements:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"export const frontmatter = {\n navbar: {\n hide: true,\n },\n footer: {\n hide: true,\n }\n};\n","lang":"javascript"},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Set ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/access/page-permissions#react-pages"},"children":["page permissions using RBAC"]},":"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"export const frontmatter = {\n rbac: {\n Admin: 'admin',\n Employee: 'read',\n },\n};\n","lang":"javascript"},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add SEO titles and descriptions:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"export const frontmatter = {\n seo: {\n title: 'Some Amazing Guide',\n description: 'Wow this guide is amazing!',\n },\n};\n","lang":"javascript"},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config/seo#control-search-indexing"},"children":["Block indexing"]}," by search engines:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"export const frontmatter = {\n seo: {\n meta: [\n {\n name: \"robots\",\n content: \"noindex\"\n }\n ]\n },\n};\n","lang":"javascript"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"add-react-page-to-navigation","__idx":5},"children":["Add React page to navigation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add the page to your site's navigation elements, such as the ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/navigation/sidebars"},"children":["sidebar"]},", ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config/navbar"},"children":["navbar"]},", or ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config/footer"},"children":["footer"]},", using the page's relative filepath."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example shows a sidebar configuration that includes React pages:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"yaml","data-title":"sidebars.yaml","header":{"title":"sidebars.yaml","controls":{"copy":{}}},"source":"- separator: Demo sidebar\n- page: about/index.page.tsx\n label: About us\n- group: Guides\n items:\n - page: guides/pricing.page.tsx\n - page: guides/example-guide.md\n","lang":"yaml"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If needed, you can use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["frontmatter"]}," to ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config/front-matter-config#front-matter-only-options"},"children":["add the sidebar to a single page"]}," without listing it in the sidebars configuration file."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"landing-page-examples","__idx":6},"children":["Landing page examples"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Redocly provides a ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://github.com/Redocly/landing-page-gallery"},"children":["gallery of example landing pages"]}," built with React."," ","These examples can help you get started creating your own custom React pages."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example pages are available in the gallery:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"width":"35%","data-label":"Screenshot"},"children":["Screenshot "]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/example-saas-thumbnail-0b5554f21332c320.png","alt":"Screenshot of the Example SaaS landing page.","framed":false,"withLightbox":true},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example shows a sleek, modern landing page for a SaaS product."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Tools:"]}," React, styled-components"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://github.com/Redocly/landing-page-gallery/blob/main/example-saas/index.page.tsx"},"children":["View source code"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/content-assets/training-portal-thumbnail-d2b51dbebcbb0b63.png","alt":"Screenshot of the training project example landing page.","framed":false,"withLightbox":true},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example demonstrates a landing page built for training and onboarding purposes."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Tools:"]}," React, styled-components"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://github.com/Redocly/landing-page-gallery/blob/main/legacy-portal/training.page.tsx"},"children":["View source code"]}]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"resources","__idx":7},"children":["Resources"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://github.com/Redocly/landing-page-gallery"},"children":["React landing page gallery"]}]}," - Explore real-world examples and design patterns for creating compelling React-based documentation pages"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization/custom-page-templates"},"children":["Customize page templates"]}]}," - Use React pages as reusable templates for Markdown content with consistent layouts and functionality"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/branding"},"children":["Style your site"]}]}," - Customize the appearance of React pages using CSS variables, custom stylesheets, and component-specific styling"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/access/page-permissions"},"children":["Configure RBAC for pages and content"]}]}," - Implement role-based access control to restrict React page visibility based on user roles and team membership"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization"},"children":["Extend with code"]}]}," - Discover customizable components and customization options for your project"]}]}]},"frontmatter":{"products":["Revel","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"tagList":["configOptionRequirements","html","img","table"],"title":"Create React pages","lastModified":"2026-10-01T23:00:57.000Z"}