Diátaxis Documentation Restructuring Plan
Date: 2026-01-27 Purpose: Reorganize Needle Engine documentation following the Diátaxis framework for better navigation and content discovery.
Executive Summary
The Needle Engine documentation is comprehensive (~55 main files) but currently scattered across multiple files with overlapping content and unclear categorization. By applying the Diátaxis framework's four-quadrant approach (Tutorials, How-To Guides, Explanation, Reference), we can significantly improve content discoverability and user experience.
Key Goals:
Restructure navigation menus to follow Diátaxis categories
Eliminate content duplication and overlap
Create clear entry points for different user needs
Preserve all existing content (redirect old URLs to new locations)
Understanding Diátaxis
The Four Quadrants
Tutorials
Learning-oriented
"Teach me how to get started"
Step-by-step, complete examples, beginner-friendly, guaranteed to work
How-To Guides
Task-oriented
"Show me how to solve X"
Goal-focused, assumes competence, solves specific problems
Explanation
Understanding-oriented
"Help me understand Y"
Conceptual, provides context, discusses design decisions
Reference
Information-oriented
"Tell me what Z does"
Complete, accurate, structured like the product
Key Principles
Tutorials:
Concrete, step-by-step guidance
Focus on learning, not task completion
Early visible results to build confidence
Minimal explanation (link to concepts instead)
Perfect reliability (every step must work)
How-To Guides:
Problem-centered, not tool-centered
Assumes user already knows what they want
Action-oriented, no digression
Practical over complete
Explanation:
Broader perspective
Makes connections across topics
Provides historical context and "why"
Can include opinions and alternatives
Reference:
Neutral, factual descriptions
Consistent patterns and structure
Mirrors product organization
Complete and accurate
Current Documentation Analysis
File Inventory (55 main files)
Landing & Overview (4 files)
index.md- Homepage with features and testimonialsvision.md- Project philosophy and goalsfeatures-overview.md- Comprehensive feature listtechnical-overview.md- glTF architecture deep dive
Getting Started (4 files)
getting-started/index.md- Installation guide with workflow choicesgetting-started/typescript-essentials.md- TypeScript fundamentalsgetting-started/for-unity-developers.md- Unity to web transition guideexamples.md- Links to samples and showcase
Integration Guides (6 directories)
unity/index.md- Unity editor integration (~320 lines)unity/editor-sync.md- Hot reload and live editingblender/index.md- Blender addon guide (~450 lines)three/index.md- three.js integrationthree/needle-devtools-for-threejs-chrome-extension.md- Chrome extensioncloud/index.md- Needle Cloud platformcustom-integrations/index.md- Custom integration guideai/index.md- AI integration (MCP server)
Core Scripting & Development (6 files)
scripting.md- Component system, lifecycle (~850 lines) [LARGE]scripting-examples.md- Code patterns and examples (~530 lines)component-reference.md- Built-in components catalog (~400+ components)component-compiler.md- TypeScript-to-C# generationmodules.md- NPM module systemproject-structure.md- Editor vs web project explanation
Export & Assets (3 files)
export.md- Exporting from Unity/Blender (meshes, materials, animations)materialx.md- MaterialX format for complex materialseverywhere-actions.md- USDZ/QuickLook AR experiences
Web Integration (7 files)
html.md- Frameworks, bundlers, PWA, CDNembedding.md- Ways to embed on websitesdeployment.md- Hosting, compression, optimization (~534 lines) [LARGE]vanilla-js.md- Pure JavaScript usageintegrating-with-framer.md- Framer integrationintegrating-with-wordpress.md- WordPress integrationresponsive-3D-webdesign-with-needle-and-threejs.md- Responsive design
XR & Immersive (4 files)
xr.md- WebXR VR/AR documentationios-webxr-app-clip.md- Native iOS WebXRwebxr-image-tracking.md- Image tracking for AR(everywhere-actions.md also covers AR)
Advanced Topics (4 files)
networking.md- Multiplayer, state sync (~670 lines) [LARGE]debugging.md- Debug flags, gizmos, testing toolstesting.md- Testing strategiesunity/editor-sync.md- Hot reload and live editing
Reference (3 files)
reference/needle-config-json.md- Configuration file referencereference/needle-engine-attributes.md- Web component attributesreference/typescript-decorators.md- TypeScript decorators
Support & Community (3 files)
faq.md- Frequently asked questions (~290 lines)support.md- Support resourcestestimonials.md- User testimonials
Showcase (7 files)
showcase-*.md- Various project showcasessamples-and-modules.md- Sample projects and npm modules
Content Categorization by Diátaxis Type
TUTORIALS (Learning-Oriented)
Goal: Take a beginner from zero to a working project
getting-started/index.md
Tutorial
Good tutorial structure, multiple paths
getting-started/typescript-essentials.md
Tutorial
Teaches fundamentals from scratch
unity/index.md (sections)
Tutorial
Unity-specific getting started
blender/index.md (sections)
Tutorial
Blender-specific getting started
three/index.md (sections)
Tutorial
Web-first getting started
NEW: "Your First Interactive Scene"
Tutorial
Missing: End-to-end tutorial building something interactive
NEW: "Your First VR Experience"
Tutorial
Missing: WebXR tutorial
NEW: "Your First Multiplayer App"
Tutorial
Missing: Networking tutorial
Recommendations:
Keep existing getting started guides
Add 3 new comprehensive tutorials:
"Build an Interactive Product Viewer" (covers scripting, UI, loading)
"Create a VR Gallery Experience" (covers XR, teleportation, interaction)
"Make a Multiplayer Game" (covers networking, state sync, rooms)
HOW-TO GUIDES (Task-Oriented)
Goal: Solve specific problems for competent users
export.md
How-To
"How to export 3D content"
deployment.md
How-To
"How to deploy to various platforms"
embedding.md
How-To
"How to embed Needle Engine"
html.md
How-To
"How to integrate with frameworks"
integrating-with-framer.md
How-To
Specific platform integration
integrating-with-wordpress.md
How-To
Specific platform integration
networking.md (sections)
How-To
"How to set up multiplayer"
xr.md (sections)
How-To
"How to enable XR features"
ios-webxr-app-clip.md
How-To
"How to deploy iOS WebXR"
webxr-image-tracking.md
How-To
"How to use image tracking"
everywhere-actions.md
How-To
"How to create USDZ experiences"
materialx.md
How-To
"How to use MaterialX"
debugging.md
How-To
"How to debug your app"
testing.md
How-To
"How to test your app"
responsive-3D-webdesign-with-needle-and-threejs.md
How-To
"How to make responsive 3D"
Recommendations:
Reorganize into task-based categories:
Setup & Installation (export, embedding, deployment)
Scripting & Development (scripting patterns, testing, debugging)
XR Development (VR, AR, image tracking, USDZ)
Multiplayer & Networking (rooms, sync, custom servers)
Optimization (compression, LODs, performance)
Platform Integration (frameworks, CMS, hosting)
EXPLANATION (Understanding-Oriented)
Goal: Provide conceptual understanding and context
vision.md
Explanation
Philosophy and project goals
technical-overview.md
Explanation
Architecture, glTF, design decisions
project-structure.md
Explanation
Editor vs web project concepts
scripting.md (intro sections)
Explanation
Component architecture explanation
networking.md (architecture sections)
Explanation
Networking concepts
xr.md (platform sections)
Explanation
XR platform differences
component-compiler.md
Explanation
How component generation works
modules.md
Explanation
NPM module system concepts
NEW: "Understanding glTF Extensions"
Explanation
Missing: Deep dive into NEEDLE_* extensions
NEW: "Understanding the Export Pipeline"
Explanation
Missing: How Unity/Blender → glTF works
NEW: "Performance Architecture"
Explanation
Missing: How optimization works
Recommendations:
Create a dedicated "Concepts" or "Understanding" section
Extract conceptual content from mixed documents
Add missing explanations:
"Understanding the Component Lifecycle"
"Understanding three.js Integration"
"Understanding Compression & Optimization"
"Understanding WebXR Architecture"
REFERENCE (Information-Oriented)
Goal: Provide complete, accurate technical information
component-reference.md
Reference
Catalog of all built-in components
reference/needle-config-json.md
Reference
Configuration file schema
reference/needle-engine-attributes.md
Reference
Web component API
reference/typescript-decorators.md
Reference
Decorator syntax reference
scripting.md (lifecycle tables)
Reference
API methods and events
features-overview.md
Reference
Feature matrix/capabilities
External: API docs
Reference
TypeScript API documentation
faq.md
Reference
Common issues and solutions
Recommendations:
Keep current reference structure
Add missing references:
"Component Lifecycle Reference" (extracted from scripting.md)
"Built-in Events Reference"
"URL Parameters Reference"
"Compression Format Comparison"
"Platform Compatibility Matrix"
Link to external API docs prominently
Content Overlap & Duplication Issues
Major Overlaps Identified
1. Getting Started Duplication
Problem:
getting-started.md(root) redirects togetting-started/index.mdProblem:
for-unity-developers.md(root) redirects togetting-started/for-unity-developers.mdSolution: Delete root-level redirect files, update all links
2. Scripting Content Overlap
Problem:
scripting.md(850 lines) contains examples also inscripting-examples.md(530 lines)Problem: Both cover component creation, lifecycle, and patterns
Solution:
Split
scripting.mdinto:Explanation: "Understanding Components" (architecture, concepts)
How-To: "Creating Components" (practical guide)
Reference: "Component Lifecycle Reference" (API tables)
Move all code examples to
scripting-examples.mdRename
scripting-examples.mdto "Component Code Examples"
3. XR Documentation Fragmentation
Problem: XR content spread across 4 files (
xr.md,ios-webxr-app-clip.md,webxr-image-tracking.md,everywhere-actions.md)Solution:
Create unified "XR" section with clear structure:
Tutorial: "Your First VR Experience"
How-To Guides: "Enable WebXR", "iOS App Clips", "Image Tracking", "USDZ for iOS"
Explanation: "Understanding WebXR Platforms"
Reference: "XR Platform Support Matrix"
4. Deployment & Embedding Overlap
Problem:
deployment.mdandembedding.mdboth cover deployment methodsProblem: Sections 1-6 overlap between files
Solution:
Merge into topic-based how-to guides:
"How to Deploy to Hosting Platforms"
"How to Embed in Websites"
"How to Optimize for Production"
5. Component Reference Duplication
Problem:
component-reference.mdlists components,scripting.mdexplains many of the same componentsSolution:
Keep
component-reference.mdas pure reference (catalog format)Extract explanations to "Understanding Built-in Components"
Cross-link heavily between reference and explanation
Proposed New Navigation Structure
Top-Level Menu (Based on Diátaxis)
Detailed Structure
1. Getting Started (Single page with clear paths)
Current files used: getting-started/index.md
2. Tutorials (Learning-oriented)
3. How-To Guides (Task-oriented)
4. Explanation (Understanding-oriented)
5. Reference (Information-oriented)
6. Samples & Showcase (Inspiration)
7. Help & Community (Support)
Migration Strategy
Phase 1: Planning & Structure (Week 1)
✅ Document current state (this document)
Create detailed file-by-file migration map
Design URL redirect strategy
Get stakeholder approval
Phase 2: Content Reorganization (Weeks 2-3)
Create new folder structure
Split large files (scripting.md, deployment.md, networking.md)
Extract conceptual content to "Explanation" section
Merge overlapping content (deployment + embedding)
Create missing tutorial content
Update all internal links
Phase 3: Navigation & Menus (Week 4)
Update config.ts navbar structure
Update config.ts sidebar structure
Create Diátaxis landing pages for each section
Add breadcrumbs showing current quadrant
Phase 4: Redirects & Testing (Week 5)
Set up URL redirects for all moved pages
Test all internal links
Test external links (from blog, social media)
Update search index
Phase 5: Polish & Launch (Week 6)
Review all content for consistency
Add "Next Steps" recommendations at end of each page
Add Diátaxis navigation hints (badges, colors)
Soft launch to community for feedback
Official announcement
URL Redirect Map (Preserve Old URLs)
/getting-started.md
/getting-started/
Redirect (already exists)
/for-unity-developers.md
/tutorials/fundamentals/for-unity-developers
Redirect
/scripting.md
/how-to-guides/scripting/create-components
Redirect
/deployment.md
/how-to-guides/deployment/
Redirect
/networking.md
/how-to-guides/networking/
Redirect
/xr.md
/how-to-guides/xr/
Redirect
All existing pages
New locations
Must be mapped
Implementation: Use VuePress/Vite redirect plugin or meta refresh tags
Content Creation Needs
New Tutorials Required
"Build an Interactive Product Viewer" (~60 min)
Load a 3D model
Add UI buttons and controls
Implement camera rotation
Add hotspots with information
Deploy to Netlify
"Create a VR Gallery Experience" (~90 min)
Set up WebXR scene
Add teleportation
Implement grabbable objects
Add spatial audio
Test on Quest
"Make a Multiplayer Game" (~120 min)
Set up networking
Create player avatars
Sync game state
Add voice chat
Deploy with networking
New Explanation Pages Required
"Understanding glTF Extensions"
Deep dive into NEEDLE_* extensions
How data is serialized
Custom extension development
"Understanding the Export Pipeline"
Unity/Blender → TypeScript → glTF flow
Component compiler details
Data mapping process
"Performance Architecture"
How compression works
Progressive loading internals
Mesh LOD generation
New Reference Pages Required
"URL Parameters Reference"
All debug flags
Query parameter options
Testing parameters
"Browser Compatibility Matrix"
Supported browsers
WebXR support by device
Known limitations
"Error Messages Reference"
Common errors
Causes and solutions
Troubleshooting steps
Design & UX Enhancements
Visual Indicators
Color-code quadrants: Blue (Tutorials), Green (How-To), Orange (Explanation), Purple (Reference)
Add badges: "Tutorial", "How-To", "Explanation", "Reference" on each page
Breadcrumbs: Show current location in structure
Navigation Improvements
"Next Steps" sections: End each page with relevant next actions
Related Content: Show related pages in other quadrants
Search filtering: Filter by Diátaxis type
Landing Pages
Create dedicated landing pages for each Diátaxis quadrant:
/tutorials/- "Learn Needle Engine"/how-to-guides/- "Solve Problems"/explanation/- "Understand Concepts"/reference/- "Look Up Information"
Success Metrics
Quantitative
Reduce avg. time to find information by 40%
Increase tutorial completion rate by 30%
Reduce duplicate content by 50%
Achieve 95%+ internal link accuracy
Qualitative
Positive community feedback
Reduced "where is X?" questions on Discord
New users report clearer onboarding
Contributors understand where to add new content
Stakeholder Approval Required
Decisions Needed
Approve new URL structure
Approve content duplication removal plan
Approve tutorial creation scope
Set timeline and assign resources
Define success criteria
Risks & Mitigation
Broken external links
High
Comprehensive redirect strategy
User confusion during transition
Medium
Gradual rollout, announcement
SEO impact
Medium
Maintain old URLs with redirects
Content gaps discovered
Low
Phased approach, community feedback
Next Steps
Review & Approve: Stakeholders review this plan
Create File-by-File Map: Detailed migration spreadsheet
Prototype Navigation: Test new menu structure
Begin Phase 2: Start content reorganization
Appendix: File-by-File Migration Map
(This section will be expanded in a separate document)
Document Version: 1.0 Last Updated: 2026-01-27 Authors: Claude AI (Analysis), Needle Team (Review & Approval)
Last updated