Rspress Documentation

website·Indexed 34 days ago

https://v2.rspress.rs/

A fast, static site generator for technical documentation that combines Markdown and JSX syntax via MDX. Features include internationalization (i18n), multi-version support, custom theme development using React components, and advanced code block highlighting powered by Shiki.

Tokens
53K
Snippets
326
Records
409
Agent score
64%

What's inside Rspress

  1. Overview of Rspress 2.0 features

    Rspress 2.0 introduces several core enhancements to the documentation development experience beyond compilation performance:

    • AI-Native Support: Built-in generation of llms.txt and SSG-MD capability to provide high-quality Markdown content optimized for AI Agents.
    • Instant Startup: lazyCompilation is enabled by default, building only required files upon route visits and using resource prefetching on link hover to ensure fast startup regardless of project size.
    • Enhanced Code Highlighting: Integrated Shiki for build-time syntax highlighting, supporting theme switching and transformer extensions (e.g., @rspress/plugin-twoslash).
    • Theme Customization: A new default theme with stable APIs for custom theme implementation.
    • Developer Experience (DX): Optimized HMR for _nav.json and _meta.json, JSON schema for IDE code hints, default dead link checking, and support for external file references in code blocks.
    • Rslib Integration: Integration with create-rslib allows developers to select Rspress as the documentation tool when initializing component library projects.
  2. Overview of Rspress Plugin System capabilities

    The Rspress plugin system allows developers to extend both the Node side (build process) and the Browser Runtime. Key capabilities include:

    • Extending Markdown/MDX compilation via remark or rehype plugins.
    • Adding custom pages and routes (e.g., a /blog route).
    • Customizing build tool behavior by modifying Rsbuild or Rspack configurations.
    • Extending page metadata (like title and description).
    • Executing custom logic before and after builds.
    • Adding global React components to the theme (e.g., a BackToTop button or side-effect components).
  3. Overview of Rspress core features

    Rspress is a front-end toolchain built with Rust that provides the following core capabilities:

    • High Performance: Blazing fast build speeds leveraging a Rust-powered toolchain.
    • MDX Support: Ability to use React components directly within Markdown content.
    • Integrated Search: Built-in full-text search that automatically generates an index during the build process.
    • AI Optimization: Support for SSG-MD to generate llms.txt-compliant indexes and Markdown files, improving documentation accessibility for Large Language Models (LLMs).
    • Static Site Generation (SSG): Generates static HTML files for production, allowing deployment to any hosting provider.
    • Extensibility: Flexible customization of the theme UI and build pipeline via Rspress extension APIs.
  4. Use the Callout component to highlight information

    The Callout component in RsPress is used to create highlighted information blocks for tips, warnings, and notes. It can be used via the container syntax in both Markdown and MDX files.
    :::tip
    This is a tip callout using container syntax.
    :::
  5. Customize the Overview page styles via a custom theme

    To modify the visual styles of the Overview page while retaining the built-in functionality, use a custom theme to target the OverviewGroup component. In your index.mdx file, ensure the overview frontmatter property is set to true.
    ---
    overview: true
    ---
  6. Use HomeLayout for homepage structure

    HomeLayout is the primary layout component used for the RsPress homepage. It is responsible for integrating and rendering the Hero, Features, and Footer sections of the page.
  7. Inject custom head content using the Head component

    The Head component in RsPress allows you to inject custom head content into the document. It is built on the unhead library. For scenarios where head entries need to be declared as objects or computed dynamically from component state and props, the useHead hook should be used instead.