liforma examples

Education

Spanish Tutor

Lesson-based tutor app with an “I am learning” control that sets Experience learningLocale (Spanish by default; also French, German, Japanese).

  • Experience
  • Microphone
  • Transcript
  • Learning objective
  • Lessons
Live demo Run locally GitHub source Experience on Meet spec.md

What it demonstrates

  • Lesson-based app pattern — the app chooses a lesson; the lesson chooses the Liforma Experience.
  • CDN <liforma-experience> / <Experience /> embed for public experiences.
  • Close-before-switch — users end the session before picking another lesson.
  • Learning goals, session status, microphone guidance, and session notes UI.

Implementations

SvelteKit

SvelteKit

`<Experience />` from `@liforma/client/svelte` — full lesson UI with TypeScript and Svelte 5.

View implementation →Vanilla HTML

Vanilla HTML

CDN script + `<liforma-experience>` — copy-paste friendly for any site.

View implementation →Next.js

Next.js

`@liforma/client/react` plus optional App Router session route helper.

View implementation →React (Vite)

React (Vite)

Client-side React with `@liforma/client/react` — no Next.js server.

View implementation →

Related

AI agent prompt

Use the Liforma Spanish Tutor example to build an app in your chosen framework.

Read:
- https://github.com/LiformaLtd/examples.liforma.ai/blob/main/examples/spanish-tutor/spec.md
- https://github.com/LiformaLtd/examples.liforma.ai/tree/main/examples/spanish-tutor

Preserve lesson-based UX, Liforma Experience embed, and close-before-switch lesson flow.