Primrose
A syntax-highlighting text editor that renders to an HTML5 Canvas, ideal for texturing 3D objects in WebGL applications.
What is Primrose?
Primrose is a syntax-highlighting text editor that renders its interface entirely to an HTML5 Canvas element. It solves the problem of embedding editable, styled text within WebGL applications and 3D scenes, where standard DOM-based editors cannot be used. It provides features like line numbers, theming, and language support for JavaScript, HTML, and BASIC.
WebGL developers and creators of interactive 3D web applications who need to integrate text editing or display into their scenes, such as for in-world code editors, UI texturing, or immersive interfaces.
Developers choose Primrose for its unique canvas-based rendering that seamlessly integrates with WebGL and Three.js, offering a programmable text editor that can be textured onto 3D objects. It provides a specialized solution where traditional HTML editors fail.
Overview
A syntax-highlighting text editors that renders to an HTML5 Canvas
Use Cases
Best For
- Adding editable text areas to WebGL-based 3D applications
- Creating in-world code editors or consoles within browser-based games
- Texturing 3D objects with dynamic, user-modifiable text in Three.js scenes
- Building immersive VR/AR experiences that require interactive text input
- Embedding syntax-highlighted code viewers in canvas-rendered dashboards
- Developing custom developer tools that render within a WebGL context
Not Ideal For
- Projects requiring syntax highlighting for languages beyond JavaScript, HTML, and BASIC, such as Python or CSS
- Applications where accessibility and screen reader compatibility are critical due to canvas rendering's lack of semantic HTML
- Teams needing a feature-rich code editor with autocomplete, plugins, or collaborative editing out of the box
- Simple 2D web pages where standard HTML textareas or DOM-based editors would be more performant and easier to implement
Pros & Cons
Pros
Renders the entire editor UI to HTML5 Canvas, enabling direct integration into WebGL contexts like Three.js for texturing 3D objects, where DOM editors cannot be used.
Supports syntax highlighting for JavaScript, HTML, and BASIC with customizable color themes, enhancing code readability in immersive environments.
Offers extensive configuration via HTML attributes or JavaScript, including line numbers, word wrap, padding, and scale factors for precise control in various scenarios.
Includes international keyboard support and handles wide Unicode characters, making it versatile for global applications and diverse text inputs.
Cons
Only supports three languages (JavaScript, HTML, BASIC), which is restrictive for projects needing highlighting for other common languages like Python or TypeScript.
Requires developers to implement raycasting for pointer events in 3D contexts, adding complexity compared to automatic DOM-based event management, as noted in the README.
Missing modern text editor features like autocomplete, multi-cursor support, or a plugin ecosystem, focusing instead on core editing functions for niche use.
Frequently Asked Questions
Related Projects
Awesome-AFrame[DISCONTINUED] Collection of awesome resources for the A-Frame WebVR framework.
HologramDesktop app that let you create and prototype WebVR in interactive way needing no previous coding knowledge
React 360Build VR websites and interactive 360 experiences with React
A-FrameWeb framework for building virtual reality experiences
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.