Technical Specification: Free Online Markdown to Jira and Confluence Converter

Overview

This is a single-file, browser-based utility application designed to translate standard Markdown (CommonMark) into specific Atlassian Wiki Markup syntax. The application is designed to be a fast, zero-dependency tool for project managers, developers, and technical writers who need to port documentation between Markdown files and Atlassian ecosystem tools.

Core Features

• Live Conversion Engine: Real-time translation as the user types.
• Syntax Selection: Toggle switch to choose between 'Jira Wiki Markup' and 'Confluence Wiki Markup' outputs.
• One-Click Copy: A robust 'Copy to Clipboard' button with visual feedback.
• Input Sanitization: Automatically handles escaping special characters required for Confluence/Jira.
• Clean Input/Output UI: Dual-pane layout on desktop; stacked layout on mobile.
• No-Storage Architecture: Zero reliance on localStorage or cookies for security and compliance.

UI/UX Design

• Header: A simple, high-contrast header displaying the application title and a brief description.
• Main Interface:
  • Input Panel: A full-featured textarea for pasting Markdown. It should feature a clean border, focus ring (blue-500), and placeholder text.
  • Action Bar: A row of centered, functional buttons: 'Convert', 'Clear', and 'Copy Result'. Include a dropdown or segmented control to switch between Jira and Confluence targets.
  • Output Panel: A non-editable code block or textarea pre-populated with the generated markup, featuring line numbers or syntax highlighting visuals if possible.
• Aesthetic Guidelines:
  • Color Palette: Professional light-mode. Use slate-50 for the background, white for content cards, slate-900 for primary text, and blue-600 for primary actions.
  • Shadows: Use shadow-sm for panels and shadow-md for the main content card.
  • Typography: Utilize system-stack fonts (Inter, sans-serif) for maximum legibility.

Technical Directives

• Single File: The entire application must be contained in one .html file. CSS and JS must be embedded.
• Iframe & Security:
  • DO NOT use localStorage, sessionStorage, or cookies. Maintain state via variables.
  • DO NOT trigger browser alert(), confirm(), or prompt(). Create custom CSS modals if interaction is needed.
  • Ensure the application is fully responsive using CSS Flexbox/Grid.
• Micro-Interactions:
  • Use CSS transition (ease-in-out, 200ms) for button hover states and focus rings.
  • The 'Copy' button should briefly change to a 'Copied!' state with a green checkmark icon when clicked.

Implementation Steps

1. Setup: Create a standard HTML5 boilerplate.
2. CDN Assets: Include Tailwind CSS via CDN for styling. Optionally include a lightweight parser library if complex mapping is needed (though regex-based mapping is preferred for single-file efficiency).
3. DOM Elements: Build the Input/Output layout containers.
4. Logic: Implement a conversion mapping function: Markdown -> [Target Syntax].
5. Event Handling: Add 'input' event listeners to the Markdown textarea for auto-conversion.
6. Export: Add functionality to copy the output text to the user's clipboard.