Uniform Examples

This repo contains various examples to facilitate your getting-started experience with Uniform capabilities, such as Uniform Context, Uniform Canvas, and Uniform Mesh.

‼️ For a more complete starter kit, consider looking at the Component Starter Kit instead. It contains essential set of components you need to start building personalized web experiences with Uniform. Built with TailwindCSS, React, and Next.js 15 App Router.

Basic app starters

These starters don't have a lot of functionality, they are single page, single component sort of "hello world" starters typically used to learn the essentials of Uniform SDK and be used as a starting point for the greenfield projects. Preview, personalization and A/B testing is enabled on all of these starters.

• 🆕 Recommended start -> Hello world starter for Next.js 16 App Router - the latest Next.js App Router Starter.
• Hello world starter for Next.js Page Router - essential 1 page, 1 component starter.
• React Vite SSR starter - basic React Vite starter with Uniform SDK pre-configured using server-side rendering.
• Hello world starter for Angular - essential 1 page, 1 component starter for Angular with full featured support for personalization and A/B testing as well as Uniform Canvas and CMS.
• Svelte / Sveltekit Starter - a SvelteKit application integrated with Uniform's visual composition and personalization platform. This starter demonstrates how to build component-driven pages with visual editing capabilities and edge-side personalization.
• Nuxt hello world starter - essential 1 page, 1 component starter, recommended baseline for new projects using Nuxt. The starter is available to be installed via npx @uniformdev/cli@latest new.
• Gatsby starter - a simple marketing site showing the essentials of Uniform + Gatsby.js integration, including personalization and A/B testing!
• Create React App Starter (CSR) - basic Create React App starter with Uniform SDK pre-configured using client-side rendering.
• iOS Swift example without personalization - simple 1 page app with 3 slides carousel, with parameters mappings to Uniform composition

Mesh examples

These starters are created to accelerate your learning and development of a new extension to Uniform:

• Generic new integration starter is provided to streamline your first mesh integration development experience. See the docs here for info on how to extend Uniform Mesh.
• 🆕 New CMS integration starter implements an essential external CMS integration using a mocked CMS API. If you are building a content integration (for CMS or any content repository), this is a great starting point.
• Custom parameters/fields example shows how to extend the standard set of parameter or field types. This may not be a full-fledge integration but if you need a custom UX on top of a parameter or a field, it's a great starting point with plenty of examples.
• 🆕 Editor tools example shows how to extend Canvas editor's siderail with custom functionality using an example of a composition copy functionality.

Feature starters

These starters focus on specific Uniform feature and capabilities:

• 🆕 Search starter - essential search API example starter based on Next.js 15 app router.
• Next.js starter for App Router - essential localization enabled starter for Next.js with app router and React Server Components.
• Next.js starter for Page Router - essential localization enabled starter for Next.js.

Starters pre-wired with search integrations

• Next.js starter for Algolia - Next.js starter that contains Algolia instant search components pre-wired to be managed in Uniform, see more docs here.
• Next.js starter for Coveo - Next.js starter that contains Coveo search components pre-wired to be managed in Uniform, see more docs here.
• Next.js starter for Klevu - Next.js starter that contains Klevu search components pre-wired to be managed in Uniform, see more docs here.

Starters pre-wired with specific integrations

• Salesforce Composable Storefront - Uniform Composable Storefront Starter for Salesforce B2C Commerce.
• Segment CDP personalization example - Next.js starter pre-wired to work with Twilio Segment Profile API to enable personalization. See the related docs here.
• Next.js starter for Sitecore - essential 1 page, 1 component starter pre-wired with the Sitecore XM/XP integration. Recommended baseline for new projects using Next.js.

Context examples

These starters are enabled with edge-side personalization SDK using only Uniform Context, without visual experience capability (Canvas):

1. Next.js app router
2. For Akamai using Edge Workers
3. For Cloudflare using Workers
4. For Netlify using Edge Functions
5. For Vercel using Edge Middleware

Other starters and examples

There are more useful starters and examples in other repos:

• Next.js Marketing Starter - imaginary conference site in Next.js leveraging all the Uniform goodness: Canvas and Context.
• Nuxt Marketing Starter - imaginary conference site in Nuxt 3 leveraging all the Uniform goodness: Canvas and Context.
• Module Federation, Tanstack Router and Vite - imaginary tech saas starter with module federation for micro-frontends and Vite.