TJEditor & TJRenderer
A sophisticated text editor and renderer pair with powerful capabilities.
ReactMarkdownText EditorCodeMirrorRemarkRehype
Click to enlarge
Tech Stack
- React
- Codemirror
- remark/rehype plugins
- Prism.js
Timeline
1 month (January 2025)
My Role
Solo Developer
Project Overview
TJEditor is a powerful text editor and renderer built with React. It offers real-time markdown rendering with support for standard and extended markdown syntax, as well as custom syntax extensions for creating interactive and dynamic content.
Key Features
- Rich text editing with Codemirror
- Real-time markdown preview
- Custom markdown syntax support
- Interactive elements like callouts, spoilers, and quick asides
- Autocompletion for internal links and callout types
Custom Markdown Syntax
- Internal links:
[[Text]](url) - Quick asides:
?[content] - Callouts:
::type content - Spoilers:
||content|| - Custom line breaks:
{\n} - External references: Wikipedia
[Text](wiki:Page_Title), DOI[Text](doi:10.1234/example)
Tech Stack
- React
- Codemirror
- remark/rehype plugins
- Prism.js
Key Features
- •Rich text editing with Codemirror
- •Real-time markdown rendering
- •Support for standard and extended markdown syntax
- •Custom markdown syntax extensions
- •Interactive elements (callouts, spoilers, quick asides)
- •Autocompletion for internal links and callout types
Challenges & Solutions
Creating a flexible plugin system for extending markdown syntax. Implementing efficient real-time rendering and editor updates. Managing complex state and interactions within the React components.
What I Learned
Deepened understanding of React component architecture and state management. Gained experience with integrating and customizing third-party libraries like CodeMirror and remark/rehype. Learned about markdown parsing, syntax trees, and AST manipulation.