A PowerApps Component Framework (PCF) virtual control that renders Markdown, JSON, and HTML content using Fluent UI React v9. Designed for both Model-Driven and Canvas apps with built-in support for Mermaid diagrams, KaTeX math, syntax highlighting, and interactive JSON editing.

• Multiple Text Formats — Markdown, JSON, HTML, Rich Text, and Plain Text
• JSON Form View — Edit JSON data through auto-generated, type-aware form controls
• Fluent UI v9 — Native Microsoft design language, consistent with Power Platform
• Mermaid Diagrams — Flowcharts, sequence diagrams, Gantt charts rendered inline
• KaTeX Math — Inline and block mathematical expressions
• Syntax Highlighting — 190+ languages via highlight.js
• Image Modal — Click-to-zoom with keyboard navigation
• Debug Mode — Inspect rendered HTML output for troubleshooting
• Responsive — Adapts to container dimensions and display context
• Accessible — ARIA labels and full keyboard support

1. Download the latest .zip from Releases
2. Import the managed solution into your Power Platform environment
3. Add the control to your form or canvas app

git clone https://github.com/illusion615/PCF-Universal-Textbox-Fluent.git
cd PCF-Universal-Textbox-Fluent
npm install
npm run build
npm run rebuild

PCF-Universal-Textbox-Fluent/
├── docs/ # Documentation
│ ├── ARCHITECTURE.md # System architecture and design
│ ├── DEVELOPMENT.md # Development guide
│ ├── DEPLOYMENT.md # Deployment and troubleshooting
│ ├── API.md # API reference
│ └── TODO.md # Roadmap and known issues
├── UniversalTextbox/ # Control source
│ ├── index.ts # PCF control class
│ ├── UniversalTextboxComponent.tsx # Main React component
│ ├── UniversalTextboxComponent.css # Styles
│ ├── Icons.tsx # Inline SVG icons
│ ├── ControlManifest.Input.xml # PCF manifest
│ ├── components/ # Shared UI components
│ │ ├── FormField.tsx # Type-aware form field
│ │ ├── NestedObject.tsx # Nested object renderer
│ │ └── ArrayTable.tsx # Array table display
│ ├── renderers/ # Content renderers
│ │ └── JsonFormRenderer.tsx # JSON Form renderer
│ └── generated/ # Auto-generated types
├── UniversalTextboxFluentSolution/ # Solution packaging
├── screenshots/ # Documentation images
├── types/ # TypeScript declarations
├── CHANGELOG.md # Version history
└── webpack.config.js # Build configuration

• Mermaid diagrams via fenced mermaid code blocks
• LaTeX math: $...$ inline, $$...$$ block
• Syntax-highlighted code blocks (190+ languages)
• GitHub Flavored Markdown tables
• Embedded HTML

• Collapsible tree with type-colored values
• Root level expanded by default
• Array item counts and indexed navigation
• Graceful error display for malformed JSON

• Auto-generated controls: text inputs, spin buttons, checkboxes, date pickers
• Collapsible nested objects with visual grouping
• Array rendering as tables or nested views
• Toggleable label position (left / top)

• One-click copy with visual feedback (checkmark / dismiss icon)
• Click-to-zoom image modal with keyboard controls
• Live editing with auto-resize textarea
• Debug overlay for HTML inspection

• Node.js 14+
• PowerApps CLI
• Visual Studio Code (recommended)

npm run start # Development server
npm run start:watch # Watch mode
npm run build # Production build
npm run rebuild # Package solution
npm run lint:fix # Lint and auto-fix
npm run clean # Remove build artifacts

• Power Platform environment with PCF enabled
• System Administrator or System Customizer role
• Attachment size limit set to 100 MB or higher (see Deployment Guide)

1. Download the managed solution from Releases
2. Import into your Power Platform environment
3. Configure control properties on forms or canvas apps
4. Verify rendering in the target environment

Note: The bundle includes Mermaid, KaTeX, and highlight.js. If import fails due to size, increase the environment attachment limit. See Deployment Guide for details.

Chrome 80+ / Firefox 74+ / Safari 13+ / Edge 80+

• Code splitting with separate vendor chunks
• Tree shaking and dead code elimination
• Lazy initialization for Mermaid and KaTeX
• Minified production output

Contributions are welcome. See the Development Guide for setup and coding standards.

1. Fork the repository
2. Create a feature branch
3. Implement changes with documentation updates
4. Submit a pull request

• JSON Form View with type-aware editing
• Runtime type selector
• Copy button with status feedback
• Mermaid diagrams, KaTeX math, syntax highlighting
• Image modal with zoom
• Collapsible JSON tree viewer
• MDA height configuration
• Inline SVG icons
• CSS isolation (no style leakage)

• Rich text editor integration
• Custom theme support
• Export functionality

See TODO.md for the full roadmap.

• Issues — Bug reports
• Discussions — Feature requests
• Power Platform Community — General help

MIT — see LICENSE for details.