Payas Editor

What is Payas Editor?

Payas Editor is a single-file web application — open payas-editor.html in any modern browser and you instantly have a fully-featured writing environment. It works completely offline, stores everything in your browser, and exports clean Markdown files.

Core Philosophy

Getting Started

Open the Editor

Double-click  payas-editor.html

That's it. No installation, no build step, no terminal.

Your First Document

1. The editor opens with a blank Untitled tab ready to type
2. Start writing — the toolbar gives you formatting options
3. Press Ctrl+S to save as a .md file
4. Press ? anytime to see all keyboard shortcuts

Open an Existing File

Click Open in the toolbar (or drag-and-drop a .md or .txt file into the editor window) to load an existing document.

Interface Overview

Toolbar Sections

Editing Features

Text Formatting

Block Formatting

Inserting Elements

• Links: Click the link icon → enter URL and display text → inserts [text](url)
• Images: Click the image icon → enter URL and alt text → inserts ![alt](url)
• Tables: Click the table icon → choose rows/columns → inserts a Markdown table
• Horizontal Rule: Inserts ---
• Task Items: Click the checkbox icon to add - [ ] task items
• Drop Cap: Decorates the first letter of the selected paragraph

Lists

• Click UL for a bulleted list (-) or OL for a numbered list (1.)
• Use Tab to indent a list item (creates nested list)
• Use Shift+Tab to outdent
• Press Enter twice to exit the list

View Modes

Switch between three layouts using the buttons in the top-right of the toolbar.

Tab Management

Payas Editor lets you work on many documents at once — each in its own tab.

Tab Operations

Sidebar

Press Ctrl+\ or click the sidebar button to toggle the document list panel. Use the search box at the top to filter tabs by name. A dot indicator shows which tabs have unsaved changes.

Auto-Save

All tab content is saved to your browser's localStorage automatically every 30 seconds. If your browser closes unexpectedly, your work is recovered on next open.

Find & Replace

Press Ctrl+F to open the Find & Replace panel.

• Find: Type to instantly highlight all matches in the document
• Case Sensitive: Toggle to match exact casing
• Replace: Enter a replacement string
• Replace: Swap the current match
• Replace All: Swap every match in the document at once
• Prev / Next: Navigate between matches

Press Escape to close the panel.

Export & Save

Save as Markdown — Ctrl+S

Converts editor content to clean Markdown and downloads a .md file. The filename defaults to the tab name.

Export Formats

Click Export in the toolbar to choose a format:

Keyboard Shortcuts

Press ? in the editor to open the interactive shortcut reference.

File Operations

Navigation

Text Formatting

Settings & Customization

Click the Settings (gear) icon to open the preferences panel.

Appearance

Behavior

All settings are saved automatically and persist between sessions.

Offline & PWA Support

Payas Editor includes a Service Worker (sw.js) that caches all necessary assets after the first visit.

What This Means

• Open the editor once while online — it downloads itself
• On every subsequent visit, it loads instantly even with no internet connection
• Google Fonts are cached after first fetch for offline typography

Install as a Native App

When served over HTTPS or localhost, browsers offer an "Install" prompt:

For Developers

This section covers the internals for contributors or developers who want to understand, embed, or extend Payas Editor.

Project Structure

Technology Stack

Code Architecture

Everything lives in payas-editor.html, organized in clearly labeled sections:

Performance Strategy

localStorage Keys

Adding a New Toolbar Button

1. Add a <button> inside #toolbar with a title attribute and bi-* icon class
2. Add a click handler in the script section using addEventListener('click', ...)
3. Call document.execCommand(...) or manipulate the Selection/Range API
4. If the button state should reflect cursor context, add it to syncToolbar()

Extending the Markdown Converter

The converter entry point is toMarkdown(element). serializeNode(node, context) is called recursively. To support a new HTML element, add a case inside the switch (node.nodeName) block:

case 'YOUR-TAG':
  return `your-markdown-syntax${children}your-markdown-syntax`;

Updating the Service Worker Cache

After releasing new files, bump CACHE_NAME at the top of sw.js to force all clients to re-download:

const CACHE_NAME = 'payas-editor-v4'; // increment on each release

Deploying

There is no build step. Copy the entire directory to any web server or CDN. The application is a single static file bundle.

# Serve locally for PWA testing
npx serve .
# or
python3 -m http.server 8080

FAQ

License

Payas Editor is released under the MIT License.

MIT License

Copyright (c) Saman Udayanga Wijesinghe

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.

Third-Party Credits