Executive Summary
A viable open-source stack exists for building a browser-based simulated desktop for digital literacy training, but no single project covers the complete requirement set. The ecosystem splits into three tiers: (1) proven, production-ready components (rich text editors, virtual filesystems, form libraries); (2) actively maintained but immature OS-in-browser projects (daedalOS, Puter, React Kitten) that provide window management but lack instrumentation for LLM-driven tutoring; and (3) research-grade benchmarks (WebArena, VisualWebArena, OSWorld) designed for agent evaluation, not learner training. The realistic build plan requires assembling 3-4 existing libraries (window manager, filesystem, editor, form validation) and building 40-50% of custom logic around instrumentation, event capture, and pedagogical state tracking. Most critical gap: no existing email client UI suitable for educational drill; existing projects (smtp4dev, Mailpit) are real mail servers, not trainable simulators.
1. OS-in-Browser & Desktop Environment Projects
Tier 1: Active, Architectural Foundation
| Project | License | Last Activity | Maintenance | Architecture | Fit for Use Case |
|---|---|---|---|---|---|
| daedalOS | MIT | 2024-2025 (active) | High | Next.js + React, modular app system, window manager via react-rnd | Good: proven window manager. Gap: no pre-built apps; must implement each subsystem. Instrumentation layer not present. |
| Puter | AGPL v3 | 2024-2025 (active) | High | Modern JS stack, multi-tier backend, filesystem, auth | Good: fullest-featured OS. Gap: AGPL licensing (reciprocal); production complexity; backend dependency limits offline use. |
| OS.js | Simplified BSD | Last update 2020-2021 | Medium (declining) | Window manager + app framework, lightweight | Good for learning. Gap: community smaller; fewer pre-built apps; aging documentation. |
| React Kitten | MIT (inferred from GH) | 2024 (recent commits) | Medium | React-based desktop environment, workspace + window manager | Good: React-native approach, customizable. Gap: new project; less battle-tested than daedalOS; limited app ecosystem. |
Tier 2: Proof-of-Concept / Hobbyist
- Web OS Simulator: Pure HTML/CSS/JS, no frameworks. Minimal, educational architecture. Gap: not extensible; missing app subsystems.
- BJH OS: Similar approach; limits on scalability.
Verdict on Existing OS Platforms
None provide pre-instrumented event capture or LLM-tutor integration. daedalOS is the strongest foundation (active, well-architected, MIT license), but requires 60-70% custom work to add event hooks (keystroke capture, focus tracking, undo/redo state), mock app implementations, and tutor-facing APIs.
2. Window Manager & Desktop Framework Options
React-Based UI Frameworks
- React95 (GitHub: react95-io/React95): Windows 95 UI component library. Purely aesthetic; no window management. Useful for styling but not for core windowing logic.
- React Desktop (gabrielbull/react-desktop): macOS High Sierra & Windows 10 styled components. Same limitation—UI layer only.
- Custom Solutions: Developers building desktop-style UIs typically combine:
- react-rnd or react-beautiful-dnd: dragging, resizing, drop zones
- zustand or Redux: state for window positions, z-index, focus
- react-grid-layout: for window tiling layouts
Assessment
No pre-built window manager library is market-standard. Most production systems (daedalOS, Puter) build custom window managers. For this project, fork daedalOS's window manager or start with react-rnd + custom state layer; don't expect a plug-and-play solution.
3. Rich Text Editor Ecosystem (Strong)
Tier 1: Production-Ready
| Project | License | Architecture | Instrumentation | Fit |
|---|---|---|---|---|
| TipTap | MIT | Headless wrapper around ProseMirror | Good: fine-grained event hooks; Document state tree queryable; Collaborator extension exposes change tracking | Excellent: TipTap's extension system allows hooking keystroke, paste, undo, formatting events. Event stream easily piped to LLM. |
| ProseMirror | MIT | Foundational engine; no UI | Excellent: state machine design; all edits tracked via tr (transaction) objects |
Excellent: can extract edit history (who typed what, when, paste source). Steeper learning curve; no default UI. |
| Lexical | Meta Commons License (permissive) | React-first; newer | Good: plugin architecture | Good: Meta backing; mature direction. Gap: not yet 1.0; smaller community than TipTap. |
Verdict
Use TipTap for document editing. MIT licensed, stable, extensible event system, and users can build custom instrumentation plugins to track all edits. Real example: Liveblocks (collaborative editing) builds on TipTap; their event model is directly reusable for LLM tutor feedback.
4. Virtual Filesystem (Strong)
Tier 1: Active & Functional
| Project | License | Last Activity | Key Features | Fit |
|---|---|---|---|---|
| ZenFS | MIT | 2024-2025 (active) | Renamed from BrowserFS; filesystem with multiple backends (IndexedDB, LocalStorage, IsoFS, OverlayFS); Node.js fs API compatible |
Excellent: mature, well-tested. Backends support persistence and isolation. Can be queried for file state (useful for LLM state reading). |
| LightningFS | MIT | Maintained (2024) | Minimal, ~15KB; single optimized backend; designed for isomorphic-git | Good: lightweight alternative if ZenFS feels bloated. Trade-off: fewer backend options. |
Verdict
Use ZenFS. Actively maintained, fully featured, clean API, and folder traversal can be exposed to tutor agent for state inspection. Wrap it to provide drag-drop file operations and virtual "My Documents" folder.
5. Email Client (Gap)
What Exists
- React Email Client (GitHub: jvadillo/react-email-client): Gmail-style React UI. Single-developer hobbyist project; no backend integration; not designed for learner interaction patterns or assessment.
- Email Simulation Project (GitHub: Semperfai/email-simulation): Vue 3 + Firebase + Gmail-like UI. Real backend; not educational; licensing and data privacy concerns for training.
- smtp4dev (GitHub: rnwood/smtp4dev): Real SMTP/IMAP server with web UI. Designed for developer testing, not learner drill. UI not learner-friendly; no pedagogical scaffolding.
Assessment
No existing open-source educational email client. This is a build-from-scratch subsystem. Recommendation:
- Start with Tauri or Next.js for UI scaffold
- Mock a simple inbox/compose interface
- Use localstorage + ZenFS to persist mock emails
- Implement send/receive simulation (delayed delivery, random inbox items) via setTimeout
- Build "view email headers" feature to teach email anatomy
- Integrate undo/redo to capture common email mistakes (send vs. draft)
Estimated effort: 2-3 weeks full-stack (UI, state, pedagogy).
6. Browser-in-Browser / Iframe Sandboxing
Research Environments (Not Reusable as Learning Platforms)
WebArena (GitHub: web-arena-x/webarena): Benchmark for autonomous agents. Hosts real website copies (e-commerce, forums, project mgmt). Excellent for agent evaluation; not designed for learner instruction or state exposure to tutors.
VisualWebArena (GitHub: web-arena-x/visualwebarena): Multimodal agent benchmark. Similar—built for benchmarking, not pedagogy.
OSWorld: Real Windows/macOS/Ubuntu environments for agent tasks. Requires full OS overhead; unsuitable for a SaaS learning platform.
Sandbox Approaches
- StackBlitz WebContainers: Real Node.js runtime in browser. Overkill for forms/email; adds security complexity.
- CodeSandbox Sandpack: Embeddable code editor+runtime. Again, overkill; designed for code sharing, not skill assessment.
- Browserless / BrowserBase: Headless browser farm APIs. Requires external backend; licensing costs; not reusable for offline learning.
Verdict
Iframe sandboxing is unnecessary. Build mock browser UI (address bar, tabs, reload button) as a visual component, not a functional sandboxed environment. Learner interactions are in-sim only; you control all navigation state. This avoids infrastructure complexity and gives you perfect instrumentation.
7. Form Handling & Validation
Tier 1: Well-Supported
| Library | License | Use | Fit |
|---|---|---|---|
| React Hook Form | MIT | Lightweight, performance-optimized, minimal re-renders | Excellent: uncontrolled components; easy event capture; integrates well with custom validation. Good for realistic form UX. |
| Formik | Apache 2.0 | Full-featured form state management | Good: comprehensive. Gap: steeper learning curve; more re-renders. |
Educational Assessment Context
Government digital literacy frameworks (Northstar Digital Literacy, GCF LearnFree) emphasize form-filling skills: text fields, checkboxes, dropdowns, file uploads, CAPTCHA. No library explicitly covers "realistic government form UI," but you can style any form library to look like USCIS/IRS/SSA forms (simple visual wrappers).
Verdict
Use React Hook Form + custom styling. Build or find a Figma-to-code template for "government form" aesthetics. Event hooks (onChange, onBlur, onFocus) are easily instrumented for tutor feedback.
8. Computer-Use Agent Training Environments (Research Only)
Benchmarks Analyzed
- OSWorld: Real OS task execution; ~8.5K tasks across Ubuntu/Windows/macOS. Evaluation-focused, not learning-focused.
- WebArena + VisualWebArena: Real website mocks with 910 visual reasoning tasks. Designed for benchmarking agent accuracy, not for learner scaffolding.
- WALT (Web Agents that Learn Tools): Meta-framework to reverse-engineer website functionality. Research-grade; no reusable learning UI.
Assessment
These are benchmarks, not platforms. They measure agent performance on real/realistic tasks, not learner performance. The evaluation infrastructure (task setup, success metrics) is domain-specific and not portable to adult education. Key difference: agents are optimized for 100% accuracy on closed tasks; learners need scaffolding, hints, and pedagogical feedback.
Not reusable. Skip this category.
9. Educational Sandbox & Precedents
Northstar Digital Literacy Assessment
- Status: Open-access, 18 standards-based modules; no open-source codebase
- Format: Interactive HTML/CSS/JS quizzes, not simulated desktop environments
- Licensing: CC BY-SA for content, but assessment UI is proprietary
- Usefulness: Instructive for assessment design (what skills to measure), not for architectural reuse
GCF LearnFree
- Status: Comprehensive video + interactive lessons; proprietary
- Approach: Recorded tutorials + embedded interactive elements (not desktop sim)
- Not open-source
Typing.com
- Status: Not open-source; proprietary platform with typing tutor + digital literacy lessons
- Open Alternative: Open-Typer (GitHub: Open-Typer/Open-Typer) – free, open-source typing tutor. Minimal; typing practice only, not a desktop environment.
Code.org & Scratch
- Useful for: Pedagogical design (scaffolding, block-based learning, success metrics)
- Not useful for: Desktop simulation architecture (they teach programming, not computer basics)
Assessment
Educational precedents are instructive for pedagogy, not for tech reuse. No existing open-source digital literacy platform provides a simulated desktop environment.
10. Capability Map: Build vs. Buy
| Subsystem | Recommendation | Rationale | Est. Build Time |
|---|---|---|---|
| Window Manager | Use daedalOS or build minimal custom (react-rnd + state) | No pre-built, production-ready library | 2-3 weeks custom |
| Document Editor | Use TipTap (MIT) | Production-ready, extensible, event hooks | 1-2 weeks integration |
| File System | Use ZenFS (MIT) | Mature, multiple backends, fully featured | 1 week integration |
| Email Client | Build custom | No suitable educational option | 3-4 weeks full-stack |
| Form Handling | Use React Hook Form (MIT) | Lightweight, event-rich, easy to instrument | 1 week integration |
| Browser Mock | Build minimal custom UI | Iframe sandboxing unnecessary; cost not worth benefit | 1 week (UI + navigation state) |
| Event Instrumentation & Tutor API | Build custom | No existing architecture for LLM-tutor feedback loops | 6-8 weeks core |
| Learner Assessment & State Persistence | Build custom | Depends on pedagogy; use Northstar as reference | 4-6 weeks |
11. Recommended Assembly Plan
Stack (80% Coverage)
- Frontend Framework: Next.js or React (17.x+) with TypeScript
- Window Manager: Fork daedalOS's window manager (
react-rnd+ custom z-index + focus state) OR use daedalOS base - Document Editor: TipTap + custom instrumentation plugin
- Filesystem: ZenFS + wrapper for drag-drop and file hierarchy visualization
- Form Handling: React Hook Form + custom form-builder component
- Email Client: Custom React components (inbox list, compose modal, message reader)
- State Management: Zustand or Redux for app focus, window positions, file tree, email state
- Persistence: IndexedDB (via ZenFS) + localStorage for preferences
Custom Build (20-40% of Project)
- Event Capture Layer: Middleware that hooks all user interactions (keystroke, click, scroll, paste, undo, focus, blur) and emits JSON events
- Tutor API: WebSocket or REST endpoint that streams event log + current UI state to external LLM service
- Assessment Framework: Skill tracking (form filling accuracy, typing speed, navigation patterns, error recovery)
- Undo/Redo: Custom implementation across all editors; capture undo-point metadata (why user undid, hint given, etc.)
- Hint & Feedback Engine: Local logic + LLM-async feedback (tutor responds to learner struggles)
Licensing Compliance
- daedalOS: MIT ✓
- TipTap: MIT ✓
- ZenFS: MIT ✓
- React Hook Form: MIT ✓
- Puter: AGPL v3 ✗ (copyleft; derivative must be open-source)
- React95: MIT ✓ (but components-only; use for styling, not core)
Avoid Puter unless you're building an open-source platform. daedalOS is the safer foundation for proprietary development.
12. Risks & Mitigation
High Risk
- Email Client Gap: No existing learner-suitable UI. Mitigation: Allocate 4 weeks; prototype early; consider hiring contractor familiar with educational UX.
- Instrumentation Complexity: LLM-tutor integration requires bidirectional event flow and state serialization. Mitigation: Start with local event logging; async tutor feedback can come later.
- daedalOS Stability: Active but may introduce breaking changes. Mitigation: Fork to internal repo; plan for occasional maintenance burden.
Medium Risk
- Performance at Scale: Browser-based apps with many windows + rich editors + large virtual filesystems can slow down. Mitigation: Use React.memo, lazy loading, and virtual scrolling for file lists.
- Accessibility: Nostalgia-driven UI (Windows 95 aesthetics) can harm WCAG compliance. Mitigation: Plan a-tags behind fancy buttons; screen reader testing early.
- Mobile Responsiveness: Desktop-sim UIs are inherently wide. Mitigation: Plan tablet/responsive layout; may not support mobile well.
Low Risk
- Rich Text Editor Choice: All three (TipTap, ProseMirror, Lexical) are solid; TipTap is lowest-friction pick.
- Filesystem: ZenFS is well-maintained and proven.
13. Realistic Build Timeline
| Phase | Effort | Timeline |
|---|---|---|
| Setup & Architecture | Research daedalOS, select stack | 1-2 weeks |
| Core OS Shell | Window manager, desktop UI, file browser | 4-6 weeks |
| Document Editor Integration | TipTap + instrumentation | 2-3 weeks |
| Email Client | UI + mock inbox/compose logic | 4-5 weeks |
| Form Builder | React Hook Form + UX | 1-2 weeks |
| Browser Mock | Address bar, navigation, reload | 1 week |
| Event Capture & Logging | Middleware, event stream | 3-4 weeks |
| Tutor API & Integration | Backend API, LLM bridge, feedback loop | 4-6 weeks |
| Assessment & Persistence | Learner skill tracking, data storage | 3-4 weeks |
| Testing & Refinement | QA, accessibility, performance | 2-3 weeks |
| Total | ~27-36 weeks (6-9 months) with mid-sized team |
14. Cost Estimate (Rough)
- Open-Source Licenses: $0 (all MIT, Apache 2.0, or free alternatives)
- Infrastructure: Depends on deployment (Vercel, Railway, self-hosted). Estimate $500-2,000/month at scale.
- Development: 1 Senior Full-Stack + 1 Mid-Level React Dev + 1 Part-Time QA. ~$200-400K over 8 months.
- Pedagogy Consulting: 1-2 experts (GCFGlobal, Northstar advisors). ~$20-50K.
- LLM Tutor Integration: Claude API or similar; variable by usage. Estimate $5-20K/month once live.
15. Direct Links & References
Core Projects
- daedalOS: https://github.com/DustinBrett/daedalOS
- Puter: https://github.com/HeyPuter/puter
- OS.js: https://github.com/os-js/OS.js or https://www.os-js.org/
- React Kitten: https://github.com/rohanrhu/react-kitten
Editors & Filesystems
- TipTap: https://tiptap.dev/ | https://github.com/ueberdosis/tiptap
- ProseMirror: https://prosemirror.net/ (author: Marijn Haverbeke)
- ZenFS: https://github.com/trasherdk/zen-fs-core | https://github.com/isomorphic-git/lightning-fs (alternative)
UI Components & Styling
- React95: https://github.com/react95-io/React95
- React Hook Form: https://react-hook-form.com/ | https://github.com/react-hook-form/react-hook-form
- Formik: https://formik.org/
Research Benchmarks (Reference Only)
- WebArena: https://github.com/web-arena-x/webarena | https://webarena.dev/
- VisualWebArena: https://github.com/web-arena-x/visualwebarena
- OSWorld: https://os-world.github.io/
Educational Precedent (Reference)
- Northstar Digital Literacy Assessment: https://www.digitalliteracyassessment.org/
- Open-Typer: https://github.com/Open-Typer/Open-Typer (open-source typing tutor)
Nostalgia & Reference UI
- windows93.net: https://windows93.net/ (interactive demo; not open-source)
- Windows 95 UI Kit (Bootstrap): https://github.com/themesberg/windows-95-ui-kit
Conclusion
You can realistically build a browser-based simulated desktop for digital literacy training in 6-9 months with a small team and 6-8 month budget of ~$200-400K in development costs. The stack combines proven open-source components (TipTap, ZenFS, React Hook Form, daedalOS) for 50-60% of the work, with custom-built subsystems for event instrumentation, tutor integration, and pedagogy (40-50%).
The most critical gap is the email client, which requires ground-up design. The second-most critical is the event capture and LLM-tutor bidirectional communication, which has no precedent in open-source and must be architected bespoke.
If you proceed with daedalOS as your OS foundation and the stack recommended above, you'll have a defensible, open-standards-based architecture that avoids proprietary lock-in and licenses cleanly for commercial deployment. Licensing risk is minimal (all MIT or permissive), provided you avoid Puter.