Spanish Tutor — Vanilla HTML

Runnable in repo

This implementation is available in the repository. Fork it, run locally, and adapt the lesson UI around the same Liforma web component embed.

Run locally

terminal

cd examples/spanish-tutor/vanilla
npx serve . -l 3008
# http://localhost:3008

Environment

Copy .env.example to .env in the SvelteKit app. Phase 1 lessons use exp_01DEMO1SPANISHCAFE.

Liforma integration

Load the CDN script and mount the experience custom element with the selected lesson's ID:

embed

<script src="https://cdn.liforma.ai/sdk/v1/client.js"><\/script>

<liforma-experience experience-id="exp_01DEMO1SPANISHCAFE"></liforma-experience>

Key files

lessons.js — lesson data
app.js — session state and embed mount
index.html — page structure + CDN script

View source on GitHub Framework overview

Related docs

AI agent prompt

Use the Liforma Spanish Tutor example as source material to build a vanilla HTML app.

Source repo folder: examples/spanish-tutor/vanilla

Preserve:
- CDN script: https://cdn.liforma.ai/sdk/v1/client.js
- `<liforma-experience experience-id="..." />` embed
- lesson list with close-before-switch behaviour
- learning goal card, session controls, session notes
- copy-paste friendly structure (index.html + app.js)

Adapt:
- branding
- lesson content
- experience IDs
- surrounding page layout