Documentation

Web App

The PTKRDME web app provides a visual drag-and-drop interface for building project README files. No installation required, works in any browser.

Getting Started

  1. 1. Sign in with your account

    Use GitHub, GitLab, Google, or email to create an account. Your projects and configurations are saved to your profile and can be shared with your team.

  2. 2. Create a new project

    Click "Create" in the navigation bar to start a new README configuration. Give your project a name and description.

  3. 3. Configure sections

    The page shows two grids: "Enabled Sections" (what will appear in your README) and "Additional Sections" (available but not yet included). Drag sections between grids to toggle them on or off. Drag within the enabled grid to reorder. Click the gear icon on any enabled section to open its configuration modal.

  4. 4. Generate and save

    Click "Generate Markdown" to preview your README in a modal, rendered with react-markdown. Click "Save Config" to save the configuration to your account for later editing. Saved projects appear on your profile page.

Section Reference

The web app shares all section types with the CLI and VS Code extension. See the section types reference for details on each section's fields, autodetection behavior, and render output.

Configurator Interface

Drag-and-Drop (swapy)

The configurator uses the swapy library for drag-and-drop. Two separate grids hold enabled and disabled sections. Empty drop slots are added to both grids as targets. When a section is dragged between grids, its status toggles and its order updates.

Configuration Modals

Each section has a react-modal that renders its configoptionsarray. The modal layout is standardised: header with title/description, scrollable body with field groups, action bar with save/cancel buttons. Fields are rendered by type (select, multi-select, input, repeater, shields).

Saving & Loading

Configurations are stored in the database as a JSON blob on the Projectmodel. When loading a saved project, the JSON is parsed and passed throughloadConfig() which deep-clones section templates from the library and overlays saved field values. When saving, saveConfig() extracts field name/value pairs from enabled sections and serialises them.

The web app imports section data and types from ptkrdmelib, wraps them with React-specific render functions, then manages state through the swapy-based configurator UI.

Loading diagram...

The webapp imports section data constants from ptkrdmelib/sections(e.g. BrandsSectionData) and types from ptkrdmelib/types. It does not use the library's ConfigManager, MarkdownManager, or AutoDetector classes. Instead, it adds its own render() functions to each section and manages state via React context. Each section file insrc/app/lib/sections/ wraps the library's section data, adds a render function and a numeric order, and is registered in allSections.

See developer guide → for how to add custom sections.