{"id":19522183,"url":"https://github.com/captaincodeman/svelte-markdown-input","last_synced_at":"2026-03-05T12:03:22.402Z","repository":{"id":210937912,"uuid":"727810068","full_name":"CaptainCodeman/svelte-markdown-input","owner":"CaptainCodeman","description":"Simple markdown input for Svelte","archived":false,"fork":false,"pushed_at":"2024-08-28T21:34:23.000Z","size":89,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-17T05:31:22.771Z","etag":null,"topics":["edit","form","html","input","markdown","svelte"],"latest_commit_sha":null,"homepage":"https://captaincodeman.github.io/svelte-markdown-input/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CaptainCodeman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2023-12-05T16:09:56.000Z","updated_at":"2024-09-27T18:23:29.000Z","dependencies_parsed_at":"2024-08-28T23:01:58.367Z","dependency_job_id":null,"html_url":"https://github.com/CaptainCodeman/svelte-markdown-input","commit_stats":null,"previous_names":["captaincodeman/svelte-markdown-input"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CaptainCodeman/svelte-markdown-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-markdown-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-markdown-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-markdown-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-markdown-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CaptainCodeman","download_url":"https://codeload.github.com/CaptainCodeman/svelte-markdown-input/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCodeman%2Fsvelte-markdown-input/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30123734,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T11:11:57.947Z","status":"ssl_error","status_checked_at":"2026-03-05T11:11:29.001Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["edit","form","html","input","markdown","svelte"],"created_at":"2024-11-11T00:37:35.304Z","updated_at":"2026-03-05T12:03:22.372Z","avatar_url":"https://github.com/CaptainCodeman.png","language":"TypeScript","readme":"# svelte-markdown-input\n\nA simple markdown input action and store for Svelte. Designed for simple inputs of HTML snippets.\n\nBy itself, the package is 473 bytes minified, 304 bytes minified and gzipped. The micromark package will add about 14Kb to your page, and including GFM will make it aroubnd 22Kb.\n\n## Usage\n\n### Installation\n\nInstall using your package manager of choice, e.g.\n\n    pnpm i -D svelte-markdown-input\n\n### Basic Usage\n\nImport the `createMarkdown` factory function to create an instance of the combined action / store. Apply it to a `textarea` via `use:markdown` and output the rendered HTML using `{@html $markdown}`:\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import { createMarkdown } from 'svelte-markdown-input'\n\n  const markdown = createMarkdown()\n\u003c/script\u003e\n\n\u003ctextarea use:markdown\u003e\u003c/textarea\u003e\n\u003cdiv\u003e{@html $markdown}\u003c/div\u003e\n```\n\n### Options\n\nPass an options object to the `createMarkdown` factory function to set additional options. These currently support:\n\ndebounce - time in ms to debounce input / rendering (default 60)\nmicromark_options - allows setting micromark options (default undefined)\n\nThe `micromark_options` give you the ability to control the Markdown-to-HTML rendering. You could, for instance, decide to enable Github Flavored Markdown, and wrap things up into an easy-to-use input component (this is what the demo uses):\n\n```html\n\u003cscript lang=\"ts\"\u003e\n  import { createMarkdown } from 'svelte-markdown-input'\n  import { gfm, gfmHtml } from 'micromark-extension-gfm'\n  import 'github-markdown-css/github-markdown-light.css'\n\n  export let hidden = 'lg:hidden'\n  export let shown = 'lg:block'\n  export let value = ''\n  export let allow_gfm = false\n\n  const markdown = createMarkdown({\n    debounce: 60,\n    micromark_options: allow_gfm\n      ? {\n        allowDangerousHtml: true,\n        extensions: [gfm()],\n        htmlExtensions: [gfmHtml()],\n      }\n      : undefined,\n  })\n\n  let editing = true\n\u003c/script\u003e\n\n\u003cdiv class=\"h-full flex flex-col\"\u003e\n  \u003cdiv class=\"{hidden} flex items-center mb-2\"\u003e\n    \u003cbutton class=\"px-3 py-1.5 border border-transparent text-sm font-medium rounded-md {editing ? 'text-gray-900 bg-gray-100 hover:bg-gray-200' : 'text-gray-500 hover:text-gray-900 bg-white hover:bg-gray-100'}\" role=\"tab\" type=\"button\" on:click={() =\u003e editing = true}\u003eWrite\u003c/button\u003e\n    \u003cbutton class=\"ml-2 px-3 py-1.5 border border-transparent text-sm font-medium rounded-md {!editing ? 'text-gray-900 bg-gray-100 hover:bg-gray-200' : 'text-gray-500 hover:text-gray-900 bg-white hover:bg-gray-100'}\"  role=\"tab\" type=\"button\" on:click={() =\u003e editing = false}\u003ePreview\u003c/button\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"h-full flex gap-2 overflow-hidden\"\u003e\n    \u003ctextarea class=\"flex-1 m-0.5 border border-gray-200 rounded-md p-4 overflow-scroll font-mono text-sm resize-none {shown}\" class:hidden={!editing} use:markdown bind:value\u003e\u003c/textarea\u003e\n    \u003cdiv class=\"flex-1 m-0.5 border border-gray-200 rounded-md p-4 overflow-scroll max-w-full {shown} markdown-body\" class:hidden={editing}\u003e{@html $markdown}\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaptaincodeman%2Fsvelte-markdown-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaptaincodeman%2Fsvelte-markdown-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaptaincodeman%2Fsvelte-markdown-input/lists"}