Examples

Reference apps showing common GioJS patterns.

Basic app (examples/basic-app)

A small app-router app touring the core features: pages, a dynamic route, an SSE endpoint, and a WebSocket endpoint, with a gio.toml exercising rate limits, i18n, and fonts.

Home page with a hydrated useState counter
Static /about page and dynamic /posts/[id] page
/ticker route.ts streaming Server-Sent Events via GioEventStream
/chat route.ts exporting a wsHandler WebSocket echo handler
gio.toml with [websocket], [[rate_limits]], [i18n], and [[fonts]] sections

Auth demo (examples/auth-demo)

A complete login flow on encrypted cookie sessions: a require_session guard verifies the session in Rust, and an auth plugin checks what is inside it.

lib/session.server.ts creating the session storage (createSessionStorage)
Login form posting to a route.ts that checks DEMO_PASSWORD and commits the session
[[guards]] require_session = true on /admin/*rest in gio.toml
Dashboard reading the session in getServerSideProps (personalized, never cached)
Logout route destroying the session cookie
gio.config.ts registering createAuthPlugin (plugin onRequest returning 403)

This documentation site

The site you are reading right now is a GioJS app (docs-site/ in the repository), exported to static HTML and served from a static host.

Nested layouts (root layout + docs layout)
All pages static with revalidate = false, exported with the GioJS exporter
A landing page at / and the docs under /docs, plus generated llms.txt and sitemap.xml
Sidebar, breadcrumbs and prev/next links derived from one nav data file per area
Search (Ctrl/Cmd K) over an index the build writes, matched in the browser
Server-rendered syntax highlighting and copy buttons on code blocks

Common patterns

Static page with layout

app/about/page.tsx

import React from 'react';

export const revalidate = false;

export default function AboutPage(): React.JSX.Element {
  return <h1>About us</h1>;
}

Dynamic page with data fetching

app/posts/[id]/page.tsx

import React from 'react';
import type { GetServerSideProps } from '@gio.js/core';

interface Props {
  post: { title: string; body: string };
}

export const revalidate = 3600; // revalidate every hour

export const getServerSideProps: GetServerSideProps<Props, '/posts/:id'> = async (ctx) => {
  const post = await fetch(`https://api.example.com/posts/${ctx.params.id}`)
    .then(r => r.json());
  return { props: { post } };
};

export default function PostPage({ post }: Props): React.JSX.Element {
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </article>
  );
}

Redirect

typescript

export async function getServerSideProps() {
  return {
    redirect: { destination: '/new-path', permanent: false },
  };
}

export default function Page() { return null; }