Docs Starter

screenshot of Docs Starter
react
remix
vite
tailwind
headless-ui

Docs Starter

Remix starter for creating documentation websites with Hygraph

Overview

Hygraph Docs Starter is a Remix starter kit designed for creating documentation websites with Hygraph. It offers a range of features to enhance the content creation and browsing experience, including rich text editing, table of contents, custom embeds, styling with Tailwind CSS, and SEO support.

Features

  • Built with Remix: The starter kit is built on the Remix platform, which provides a powerful and customizable environment for building web applications.
  • Embeddable content entries: Hygraph Docs Starter allows you to easily embed content entries using Hygraph, making it simple to include various types of content within your documentation pages.
  • Rich Text content editing: With the integration of Hygraph, you can easily create and edit content using a rich text editor, enabling you to format and style your content according to your preferences.
  • Table of Contents for docs pages: The starter kit automatically generates a table of contents for your documentation pages, making it easy for users to navigate through different sections of your documentation.
  • Render custom embeds using Rich Text Renderer: Hygraph Docs Starter provides a rich text renderer that allows you to render custom embeds within your content, giving you the flexibility to include interactive and dynamic elements.
  • Styled using Tailwind CSS: The theme is styled using Tailwind CSS, a popular utility-first CSS framework that offers a wide range of pre-built components and styles, making it easy to create visually appealing and responsive designs.
  • Responsive and mobile-friendly: Hygraph Docs Starter is designed to be fully responsive and mobile-friendly, ensuring that your documentation looks and functions well across a variety of devices and screen sizes.
  • SEO support: The starter kit includes support for SEO optimization, including Open Graph and Twitter tags, sitemap generation, and other features that help improve the visibility and discoverability of your documentation.
  • Preview mode support: Hygraph Docs Starter also provides support for a preview mode, allowing you to preview your documentation before publishing it, ensuring that everything looks perfect before making it available to your users.
react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

remix
Remix

Remix is a modern JavaScript framework that focuses on building fast and performant web applications. It emphasizes a combination of server-rendered content and client-side interactivity, offering a robust architecture for creating scalable and maintainable projects.

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

headless-ui
Headless UI

Headless UI is a set of completely unstyled, fully accessible UI components for React, Vue, and Alpine.js that empower developers to build their own fully accessible custom UI components. Headless UI allows developers to focus on building accessible and highly functional user interfaces, without the need to worry about styling or layout.

documentation
Documentation

Documentation themes are built specifically for writing technical and product documentation. They are normally written and maintained in Markdown. The often include a navigation menu, search bar, clear headings, semantic document structure and clean typography.

graphql
Graphql

A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.