Skip to main content
Prompts Feature-Rich Markdown Notes Web App Builder

developer coding user risk: low

Feature-Rich Markdown Notes Web App Builder

Build a feature-rich markdown notes application using HTML5, CSS3, and JavaScript with a split-screen interface featuring a rich text editor and live markdown preview. Implement fu…

PROMPT 

Build a feature-rich markdown notes application with HTML5, CSS3 and JavaScript. Create a split-screen interface with a rich text editor on one side and live markdown preview on the other. Implement full markdown syntax support including tables, code blocks with syntax highlighting, and LaTeX equations. Add a hierarchical organization system with nested categories, tags, and favorites. Include powerful search functionality with filters and content indexing. Use localStorage with optional export/import for data backup. Support exporting notes to PDF, HTML, and markdown formats. Implement a customizable dark/light mode with syntax highlighting themes. Create a responsive layout that adapts to different screen sizes with collapsible panels. Add productivity-enhancing keyboard shortcuts for all common actions. Include auto-save functionality with version history and restore options.

EXPECTED OUTPUT

Format
html
Constraints
  • include all specified features
  • fully functional
  • responsive

SUCCESS CRITERIA

  • Build split-screen interface with rich text editor and live markdown preview.
  • Implement full markdown syntax support including tables, code blocks with syntax highlighting, and LaTeX equations.
  • Add hierarchical organization with nested categories, tags, and favorites.
  • Include powerful search with filters and content indexing.
  • Use localStorage with export/import for data backup.
  • Support exporting to PDF, HTML, and markdown formats.
  • Implement customizable dark/light mode with syntax highlighting themes.
  • Create responsive layout with collapsible panels.
  • Add keyboard shortcuts for common actions.
  • Include auto-save with version history and restore options.

FAILURE MODES

  • Overly broad scope may result in incomplete feature implementation.
  • Complex features like PDF export or LaTeX rendering may be inadequately handled.
  • localStorage limitations could cause data loss or performance issues for large note sets.
  • Syntax highlighting and theming might not cover all languages or be fully customizable.
  • Responsive design may fail on edge-case screen sizes.

CAVEATS

Missing context
  • Recommended libraries for markdown parsing, syntax highlighting, LaTeX rendering, PDF export.
  • Output format (e.g., single HTML file, separate files, bundle size).
  • Browser compatibility requirements.
  • localStorage size limits handling or alternatives.
  • Accessibility and internationalization requirements.
Ambiguities
  • "Full markdown syntax support" lacks precise definition of supported elements beyond examples.
  • "Powerful search functionality with filters" does not specify available filters.
  • "Productivity-enhancing keyboard shortcuts for all common actions" does not list the actions or shortcuts.
  • Details on hierarchical organization system (e.g., UI for nested categories) are underspecified.
  • Version history implementation (e.g., number of versions, storage method) is unclear.

QUALITY

OVERALL
0.70
CLARITY
0.90
SPECIFICITY
0.80
REUSABILITY
0.20
COMPLETENESS
0.70

IMPROVEMENT SUGGESTIONS

  • Specify libraries like marked.js for Markdown, Prism.js for syntax highlighting, KaTeX for LaTeX, and jsPDF for PDF export.
  • Define output as a single self-contained HTML file for easy deployment.
  • List exact markdown features, search filters, and keyboard shortcuts (e.g., Ctrl+S for save).
  • Add constraints: target modern browsers, handle localStorage quota exceeded errors.
  • Include wireframe or UI mockup descriptions for split-screen and organization panels.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER