If you’re a developer, your notes are probably a mess of snippets, architectural diagrams, and quick thoughts scattered across different apps. I built DevPen to solve this—a note-taking application designed specifically for the developer workflow.
🔗 Try it live at: devpen.in
In this post, I’ll walk through the key features that make DevPen more than just another text editor.
1. The Dual-Editor Experience: Markdown + Monaco 💻
Why choose between the speed of Markdown and the power of a real code editor? DevPen gives you both:
- Markdown Mode: Powered by Lexical, it’s perfect for fast, structured writing.
- Rich Text / Code Mode: Powered by the Monaco Editor (the same engine behind VS Code). You get proper syntax highlighting and that familiar feel while drafting technical docs.
You can switch between them seamlessly, and the app preserves your formatting and metadata.
2. Your AI Sidekick ✨
Taking notes is only half the battle; finding and using them is the other half. DevPen includes an AI Sidekick (powered by OpenAI) that lives in your sidebar to help you:
- Summarize: Turn long brain-dumps into actionable bullet points.
- Explain Commands: Stuck on a complex regex or shell script? Ask the AI to break it down.
- Refine Tone: Polish your rough notes into professional updates or documentation.
3. Visualizing Logic with Mermaid.js 📊
Sometimes text isn't enough. DevPen supports Mermaid diagrams out of the box. You can write your flowcharts or sequence diagrams in text and have them rendered instantly. It’s perfect for mapping out system architectures or logic flows without leaving your notes.
4. Developer-First Tech Stack 🛠️
Under the hood, DevPen is built with modern, scalable technologies:
- Frontend: React 19, Tailwind CSS, Shadcn UI, and Jotai for state management.
- Backend: Node.js / TypeScript running on AWS Lambda.
- Storage: A smart hybrid approach using DynamoDB for metadata and S3 for note content (ensuring you can save even the largest technical docs without hitches).
- Authentication: Secure access via Google Sign-in and OTP validation.
5. Cloud Sync & Responsive Design ☁️
Inspiration strikes everywhere. DevPen is fully responsive, looking great on both desktop and mobile. All your notes are auto-synced to the cloud, so your thoughts are always where you are.
What do you think?
I built this to solve my own pain points, but I'd love to hear your feedback. What features do you consider absolute must-haves in a developer note-taking app? Let me know in the comments below! 👇