Example projects
If you are starting a new Front End project and you don't want to start from scratch, we got you covered with many example projects that contain everything you need to kickstart your web page or application.
Choose an example project based on the Honeycomb dependency and specific use case you need to tackle.
Honeycomb Static
Starter project with Honeycomb from CDN
- HTML and vanilla JavaScript example project featuring three basic page layouts.
- Initialize and use plugins such as dropdown.js and classToggler.js.
- Uses web component icons from honeycomb-icons and import fonts from honeycomb-fonts.
Example layout templates for TVMs
- Pre-made example layouts for basic TVM user flows with Honeycomb loaded from the CDN.
- Built with Vite and Handlebars for templating.
- Uses web component icons and illustrations and import fonts from honeycomb-fonts.
Honeycomb React
Starter SPA project built with Vite
- A starter single page application containing examples of pages using Vite.
- Main navigation using "react-router-dom" and working burger menu.
- Fonts installed using "@fontsource/roboto".
- Testing environment configured with "jest" and "@testing-library/react".
- Icons from Honeycomb Icons React library.
Starter SSR project built with NextJS
- A starter server side rendered project containing examples of pages using NextJS.
- Configure Injecss context provider with Honeycomb SSR style nodes.
- Roboto font installed from "next/font/google".
- Testing environment configured with "vitest" and "@testing-library/react".
- Icons from Honeycomb Icons React library.
Example layout templates for TVMs
- Build Ticket Vending Machine (TVM) interfaces using Honeycomb React components using Vite and TypeScript.
- Configure and switch between different TVM themes.
- When and how to extend Honeycomb components for specific use cases that require customization.
- Fonts installed using "@fontsource/roboto".
- Testing environment configured with "vitest" and "@testing-library/react".
- Icons from Honeycomb Icons React library.
Charts
Charts examples using ECharts
- How to create Honeycomb themed chart components using ECharts.
- Switch between light and dark mode themes.
- Examples using React + Vite and Vanilla JavaScript and how to create a React wrapper component for ECharts.