{"id":28330839,"url":"https://github.com/dijith-481/markweavia","last_synced_at":"2026-01-21T13:25:25.956Z","repository":{"id":294041555,"uuid":"985779410","full_name":"dijith-481/Markweavia","owner":"dijith-481","description":" A no-nonsense tool that transforms your Markdown into elegant, professional, platform-independent HTML presentations, all  with familiar Vim motions.","archived":false,"fork":false,"pushed_at":"2025-10-14T14:56:11.000Z","size":23853,"stargazers_count":106,"open_issues_count":0,"forks_count":9,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-10-19T01:24:33.675Z","etag":null,"topics":["markdown","nextjs","react","slides","vim"],"latest_commit_sha":null,"homepage":"https://markweavia.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dijith-481.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"dijith-481","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"thanks_dev":null,"custom":null}},"created_at":"2025-05-18T14:09:10.000Z","updated_at":"2025-10-16T19:46:30.000Z","dependencies_parsed_at":"2025-06-19T00:31:42.589Z","dependency_job_id":"fb0ae07a-a9a2-48b2-b418-61ed4376cb45","html_url":"https://github.com/dijith-481/Markweavia","commit_stats":null,"previous_names":["dijith-481/markweavia"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/dijith-481/Markweavia","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dijith-481%2FMarkweavia","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dijith-481%2FMarkweavia/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dijith-481%2FMarkweavia/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dijith-481%2FMarkweavia/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dijith-481","download_url":"https://codeload.github.com/dijith-481/Markweavia/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dijith-481%2FMarkweavia/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281172208,"owners_count":26455583,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-26T02:00:06.575Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["markdown","nextjs","react","slides","vim"],"created_at":"2025-05-26T17:42:32.467Z","updated_at":"2025-10-26T21:04:42.286Z","avatar_url":"https://github.com/dijith-481.png","language":"TypeScript","funding_links":["https://github.com/sponsors/dijith-481"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\r\n  \u003cimg src=\"https://github.com/dijith-481/Markweavia/blob/main/public/logo.svg\" alt=\"Markweavia Logo\" width=\"120\"\u003e\r\n  \u003ch1\u003eMarkweavia\u003c/h1\u003e\r\n  \u003cp\u003e\u003ci\u003eMarkdown, beautifully woven.\u003c/i\u003e\u003c/p\u003e\r\n  \u003cp\u003eA no-nonsense tool  for crafting minimalist, professional platform-independant presentations directly from Markdown  using familiar Vim motions.\u003c/p\u003e\r\n\r\n  \u003cp\u003e\r\n    \u003cimg src=\"https://img.shields.io/badge/license-GPL--2.0-blue.svg?style=for-the-badge\u0026logoColor=D8DEE9\u0026color=5E81AC\" alt=\"License: GPL-2.0\"\u003e\r\n    \u003c!-- Add other badges here: build status, version, etc. --\u003e\r\n    \u003c!-- Example: \u003cimg src=\"https://img.shields.io/github/stars/YOUR_USERNAME/markweavia?style=for-the-badge\u0026logo=github\u0026logoColor=D8DEE9\u0026color=88C0D0\" alt=\"GitHub stars\"\u003e --\u003e\r\n    \u003c!-- Example: \u003cimg src=\"https://img.shields.io/github/workflow/status/YOUR_USERNAME/markweavia/CI?style=for-the-badge\u0026logo=githubactions\u0026logoColor=D8DEE9\u0026color=A3BE8C\" alt=\"Build Status\"\u003e --\u003e\r\n  \u003c/p\u003e\r\n\u003c/div\u003e\r\n\r\n## The Inspiration\r\n\r\n- Creating slides should be a straightforward process, especially for content that benefits from a minimalist aesthetic.\r\n- Traditional presentation software often involves excessive mouse dragging and complex component manipulation for what should be simple text and structure.\r\n- Markweavia was born from the desire to simplify this\r\n  - enabling the creation of clean, professional slides with the ease of editing a Markdown file,\r\n  - enhanced by the efficiency of Vim keybindings.\r\n    \u003e Most impactful presentations rely on clear text and an uncluttered background, a philosophy Markweavia aims to embody perfectly.\r\n\r\n## Overview\r\n\r\nMarkweavia is a web-based application that transforms your Markdown text and Katex into elegant HTML slide presentations. It provides a live preview of your current slide, allowing for a seamless WYSIWYG-like experience.\r\n\r\n**Key Features:**\r\n\r\n- **Markdown-First:** Write slides using simple, intuitive Markdown syntax.\r\n- **Vim Keybindings:** Navigate and edit with the speed and precision of Vim(hjkl go brrrr).\r\n- **Live Slide Preview:** Instantly see how your current Markdown section renders as a slide.\r\n- **Nord-Inspired Themes:** Choose from a selection of clean, minimalist themes, including light and dark(default) Nord variations and monochrome options.\r\n- **Customizable Layout:** Control page numbers, header/footer text and positions, and whether these elements appear on the first slide.\r\n- **Font Scaling:** Adjust the base font size of your slides for optimal readability(default should work for most).\r\n- **Local Storage Persistence:** Your work is automatically saved in your browser.\r\n- **Export Options:**\r\n  - Download your presentation as a self-contained HTML file.\r\n  - offline first approach with fonts,code syntax hightlighting and katex all included in single html file(~2MB file size).\r\n  - partial support for Images (online)\r\n  - Download the source Markdown (.md) file.\r\n- **File Upload:** Import existing Markdown files to continue your work or convert them to slides.\r\n- **Predefined Templates:** Quickly start with some predefined templates.\r\n- `yaml` based infile configuration\r\n\r\n\u003cimg src=\"https://github.com/dijith-481/Markweavia/blob/main/assets/fullWallthrough.gif\" width = \"48%\"\u003e\u003cimg src=\"https://github.com/dijith-481/Markweavia/blob/main/assets/presentation.gif\" width = \"48%\"\u003e\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n  \u003cimg src=\"https://github.com/dijith-481/Markweavia/blob/main/assets/editing.gif\" width=\"50%\"\u003e\r\n\u003c/div\u003e\r\n\u003ctable style=\"width:100%;\"\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd style=\"width:50%; text-align:center;\"\u003e\r\n      \u003cimg src=\"https://github.com/user-attachments/assets/b993991c-1c25-47be-9f84-248d3bc678c4\" alt=\"Presentation Preview\" style=\"max-width:100%;\"\u003e\r\n      \u003cp style=\"font-size: smaller; text-align: center;\"\u003ePresentation Preview\u003c/p\u003e\r\n    \u003c/td\u003e\r\n    \u003ctd style=\"width:50%; text-align:center;\"\u003e\r\n      \u003cimg src=\"https://github.com/user-attachments/assets/437e63d7-9672-4cb3-b9f8-d478ddfb0119\" alt=\"Editor View\" style=\"max-width:100%;\"\u003e\r\n      \u003cp style=\"font-size: smaller; text-align: center;\"\u003eEditor View\u003c/p\u003e\r\n    \u003c/td\u003e\r\n  \u003c/tr\u003e\r\n\u003c/table\u003e\r\n## How It Works\r\n\r\n1.  **Write Markdown:** Use standard Markdown headings (`#`, `##`) to define new slides.\r\n1.  **Live Preview:** As you type or navigate with your cursor, the preview pane updates to show a preview of the slide your cursor is currently on.\r\n1.  **Customize:** Use the controls or yaml config to select themes, adjust font sizes, manage page numbers, and add custom headers or footers.\r\n1.  **Vim Commands:** Utilize built-in Vim commands for saving (`:w`, `:ws`) uploading (`:u`) previewing(`:p`),changing theme(`:t`), toggling page numbers(`:page`), adding headerfooters(`:h`)\r\n1.  **Export:** When ready, export your entire presentation as a single HTML file or save your Markdown source.\r\n\r\n## Understanding Exported Slides\r\n\r\nMarkweavia generates a single, self-contained HTML file. This file includes all necessary CSS for styling (based on your chosen theme and customizations) and JavaScript for interactivity. It works offline.\r\n\r\n**HTML Structure \u0026 Styling:**\r\n\r\n- Each Markdown slide (starting with a `#` title or `##` heading ) is rendered into a `\u003cdiv class=\"slide\"\u003e`.\r\n- The content within each slide is wrapped in a `\u003cdiv class=\"slide-content-wrapper\"\u003e`.\r\n- all content maintain 16:9 aspect ratio.\r\n- component sizes are based on viewport size.\r\n- Standard Markdown elements (headings, paragraphs, lists, code blocks, tables, etc.) are converted to their corresponding HTML tags with marked.js and styled according to the active theme variables and base presentation CSS.\r\n- Code blocks are highlighted using Prism.js with a Nord-based theme.\r\n- Mathematical expressions are rendered using KaTeX.\r\n- Custom header/footer items and page numbers are positioned absolutely within each slide based on your settings.\r\n- The overall presentation uses a clean, Nord-inspired design by default, with font sizes and colors determined by the selected theme and font scaling options.\r\n  \u003e ~1Mb file size includes code syntax highlighting , fonts and katex\r\n\r\n\u003e to improve performance in live preview fonts are loaded at startup , styles and text is injected based on change this improves performance compared to previous approach\r\n\u003e\r\n\u003e with this new approach after the initial load all edits can be made in near instant, no more debounce needed.\r\n\r\n**Interactivity \u0026 Navigation:**\r\n\r\nThe exported HTML slides are fully interactive, allowing for easy navigation:\r\n\r\n**Navigation Buttons:**\r\n\r\nA set of semi-transparent navigation buttons appears on hover (typically at the bottom right) for mouse-based control:\r\n\r\n- **(Start/Home)** Jumps to the first slide.\r\n- **(Previous)** Moves to the previous slide.\r\n- **Slide Counter (`X / N`):** Shows the current slide number and total slides.\r\n- **(Next)** Moves to the next slide.\r\n- **(End)** Jumps to the last slide.\r\n\r\n**Keyboard Shortcuts:**\r\n\r\nA comprehensive set of keyboard shortcuts is available for efficient navigation:\r\n\r\n- **`ArrowRight`**, **`l`**, **`PageDown`**, **`Spacebar`**: Next slide.\r\n- **`ArrowLeft`**, **`h`**, **`PageUp`**: Previous slide.\r\n- **`f`**: FullScreen\r\n- **`Home`**: Go to the first slide.\r\n- **`End`**: Go to the last slide.\r\n- **`0-9` Number Keys**: Jump to a specific slide (e.g., `1` for slide 1, `0` for slide 10 if there are 10+ slides).\r\n\r\n### Fonts Used\r\n\r\n- **Inter:** The primary font\r\n- **Iosevka:** A monospace font used in code blocks\r\n\r\n## Tech Stack\r\n\r\n\u003cdiv align=\"left\" style=\"display: flex; flex-wrap: wrap; gap: 10px; align-items: center;\"\u003e\r\n  \u003cimg src=\"https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB\u0026labelColor=2E3440\" alt=\"React\"\u003e\r\n  \u003cimg src=\"https://img.shields.io/badge/Next.js-000000?style=for-the-badge\u0026logo=nextdotjs\u0026logoColor=D8DEE9\u0026labelColor=2E3440\" alt=\"Next.js\"\u003e\r\n  \u003cimg src=\"https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=D8DEE9\u0026labelColor=2E3440\" alt=\"TypeScript\"\u003e\r\n  \u003cimg src=\"https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge\u0026logo=tailwindcss\u0026logoColor=D8DEE9\u0026labelColor=2E3440\" alt=\"Tailwind CSS\"\u003e\r\n  \u003cimg src=\"https://img.shields.io/badge/CodeMirror-D28A00?style=for-the-badge\u0026logo=codemirror\u0026logoColor=D8DEE9\u0026labelColor=2E3440\" alt=\"CodeMirror\"\u003e\r\n  \u003cimg src=\"https://img.shields.io/badge/VIM-019733?style=for-the-badge\u0026logo=vim\u0026logoColor=D8DEE9\u0026labelColor=2E3440\" alt=\"Vim (bindings)\"\u003e\r\n  \u003cimg src=\"https://img.shields.io/badge/Marked.js-333333?style=for-the-badge\u0026logo=markdown\u0026logoColor=D8DEE9\u0026labelColor=2E3440\" alt=\"Marked.js\"\u003e\r\n  \u003cimg src=\"https://img.shields.io/badge/Nord_Theme-88C0D0?style=for-the-badge\u0026logoColor=2E3440\u0026labelColor=2E3440\" alt=\"Nord Theme\"\u003e\r\n  \u003cimg src=\"https://img.shields.io/badge/js-yaml-88C0D0?style=for-the-badge\u0026logoColor=2E3440\u0026labelColor=2E3440\" alt=\"Nord Theme\"\u003e\r\n\u003c/div\u003e\r\n\r\n- **Framework:** Next.js (with React)\r\n- **Language:** TypeScript\r\n- **Styling:** Tailwind CSS, with a strong adherence to Nord color palette principles.\r\n- **Editor Core:** CodeMirror 6\r\n- **Vim Bindings:** @replit/codemirror-vim\r\n- **Markdown Parsing:** Marked.js\r\n- **UI/UX Inspiration:** Nord Theme\r\n- **Code Assistance \u0026 Refactoring:** Google Gemini Pro (Preview 05-06)\r\n\r\n## Future Plans\r\n\r\n- **Image Pasting \u0026 Handling:** Directly paste images into the Markdown editor and have them appropriately embedded in slides.\r\n  - if you want to use images in your presentation store them in a folder in same directory and serve them using relative or absolute path.\r\n- **More Themes:** Continuously expand the selection of built-in themes.\r\n- **User-Loadable Custom Themes:** Allow users to define and load their own CSS theme variables or full theme files.\r\n- **Css editing:** Allow users to edit css directly in the editor. This will allow users to customize slides in a more granular way.\r\n- **yaml based config:** Allow users to define their own yaml config file and load it in the editor.\r\n- **library** convert codebase to library\r\n\r\n## Mobile view\r\n\r\n\u003ctable style=\"width:50%;\"\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003e\r\n      \u003cimg src=\"https://github.com/user-attachments/assets/15b09fd8-1fcf-453c-a97b-9d046e780b4a\" alt=\"Image 1\" style=\"height:400px;\"\u003e\r\n    \u003c/td\u003e\r\n    \u003ctd\u003e\r\n      \u003cimg src=\"https://github.com/user-attachments/assets/2bc28ac3-2303-4455-9f4b-a576725a660b\" alt=\"Image 2\" style=\"height:400px;\"\u003e\r\n    \r\n    \u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003efinal presentation preserve(16:9) aspect\u003c/td\u003e\r\n    \u003ctd\u003eeditor view\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n\u003c/table\u003e\r\n## Contributions are welcome!\r\n\r\n## License\r\n\r\nThis project is licensed under the **GNU General Public License v3.0**.\r\nSee the [LICENSE](LICENSE) file for details.\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n  \u003chr style=\"border-top: 1px solid #4C566A; margin: 20px 0;\"\u003e\r\n  \u003cimg src=\"https://github.com/dijith-481/Markweavia/blob/main/public/markweavia.svg\" alt=\"Markweavia Logo\" width=\"300\"\u003e\r\n  \u003cp\u003e Markdown, beautifully woven.\u003c/p\u003e\r\n  \u003cp\u003emade with ❤️ by \u003ca href=\"https://dijith.vercel.app\"\u003edijith\u003c/a\u003e\u003c/p\u003e\r\n\u003c/div\u003e\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdijith-481%2Fmarkweavia","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdijith-481%2Fmarkweavia","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdijith-481%2Fmarkweavia/lists"}