https://to-md.org/assets/image-to-markdown-BquQZZ8H.js

1import{$a as e,$t as t,Ao as n,Ba as r,Bt as i,Co as a,Do as o,Eo as s,Fa as c,Ft as l,Ga as u,Gt as d,Ha as f,Ht as p,Ia as m,It as h,Jt as g,Ka as _,Kt as v,La as y,Lg as b,Lt as ee,Mo as te,Mt as ne,Na as re,No as ie,Nt as ae,Oo as oe,Pa as se,Pt as ce,Qa as le,Qt as x,Ra as S,Rt as C,So as w,To as T,Ua as E,Ug as D,Ut as O,Va as k,Vt as A,Wa as j,Wt as M,Xa as N,Xt as P,Yt as F,Za as I,Zt as L,_n as R,_o as z,an as B,ao as V,bo as H,cn as U,co as W,dn as ue,do as de,en as fe,eo as pe,fn as me,fo as he,gn as ge,go as _e,hn as ve,ho as ye,in as be,io as xe,jo as Se,ko as Ce,ln as we,lo as Te,mn as Ee,mo as De,nn as Oe,no as ke,on as Ae,oo as je,pn as Me,po as Ne,qt as Pe,rn as Fe,ro as Ie,sn as Le,so as Re,tn as ze,to as Be,un as Ve,uo as He,vo as Ue,wo as We,xo as Ge,yo as Ke,za as qe,zg as Je,zt as Ye}from"./messages-B7vy2gX4.js";import{r as Xe,t as G}from"./navigation-DVitfQce.js";import{t as K}from"./file-image-Bgl0B5LT.js";import{t as Ze}from"./file-text-S5FBMYk7.js";import{n as Qe,t as $e}from"./header-BuguHzTE.js";import{t as q}from"./markdown-editor-NTm__3A9.js";import{t as et}from"./scan-text-q_TDOS-r.js";import{t as tt}from"./shield-check-e_NlIgFi.js";import{t as nt}from"./sparkles-BS1nff9f.js";import{t as rt}from"./table-2-C5J_NWZ7.js";import{t as it}from"./upload-B_6mcJWH.js";import{O as at,f as J,l as Y,m as X,y as ot}from"./index-CI4CH93Q.js";import{t as st}from"./utils-DXalBF5w.js";import{t as ct}from"./button-scB-LEnO.js";var Z=D(Je(),1),Q=b(),$={title:`Markdown to PDF - to-md.org`,fileName:`Markdown to PDF - to-md.org_Page_1.jpg`,imageSrc:`/examples/Markdown%20to%20PDF%20-%20to-md.org_Page_1.jpg`,markdown:`# TO MD Markdown to PDF - Feature Guide
2
3**TO MD** turns Markdown into a clean, PDF-ready document in your browser. Write or paste Markdown, check the live preview, choose a template, and export a polished PDF.
4
5> Example source: this Markdown was used to generate \`Markdown to PDF - to-md.org.pdf\`.
6
7---
8
9## 1. Real-time Markdown Preview
10
11The editor renders common Markdown elements as you type:
12
13- Headings from \`# H1\` to \`###### H6\`
14- Paragraphs, links, emphasis, lists and blockquotes
15- Tables for comparison data
16- Fenced code blocks for technical notes
17- PDF-style preview before export
18
19## 2. PDF-ready Templates
20
21| Template | Best For |
22| --- | --- |
23| GitHub Style | README files, changelogs, developer docs |
24| Clean | General writing, notes, lightweight reports |
25| Business | Proposals, internal updates, client documents |
26| Academic | Essays, research notes, long-form drafts |
27| Modern | Product briefs, planning documents |
28| Minimal | Simple documents that should stay quiet |
29
30## 3. Export Workflow
31
321. Paste Markdown or upload a \`.md\` file.
332. Review the live preview.
343. Pick a document template.
354. Click **Download PDF** or **Save as PDF**.
36
37## 4. Privacy-first Editing
38
39Markdown editing and PDF preview run in the browser workspace. This keeps drafts, notes and internal documents easier to inspect before export.
40
41## 5. More TO MD Tools
42
43- Markdown to PDF
44- Image to Markdown
45- PDF to Markdown
46- Word to Markdown
47- HTML to Markdown
48- JSON to Markdown`};function lt(e,t){return e instanceof X?t===`INSUFFICIENT_CREDITS`||/insufficient credits/i.test(t)||/not enough/i.test(t)&&/credits?/i.test(t):!1}function ut({labels:e,className:t}){return typeof window>`u`?(0,Q.jsx)(q,{labels:e.editor,className:t,initialMarkdown:$.markdown}):(0,Q.jsx)(dt,{labels:e,className:t})}function dt({labels:e,className:t}){let n=Xe(),{data:r}=at(),[i,a]=(0,Z.useState)(`example`),[o,s]=(0,Z.useState)($.markdown),[c,l]=(0,Z.useState)($.imageSrc),[u,d]=(0,Z.useState)($.fileName),[f,p]=(0,Z.useState)(null),[m,h]=(0,Z.useState)(null),[g,_]=(0,Z.useState)(!1);(0,Z.useEffect)(()=>{let e=sessionStorage.getItem(`to-md.initialImageDataUrl`),t=sessionStorage.getItem(`to-md.initialImageFileName`);e&&(l(e),d(t||`uploaded-image`),p(t?ft(e,t):null),s(``),a(`uploaded`),h(null),sessionStorage.removeItem(`to-md.initialImageDataUrl`),sessionStorage.removeItem(`to-md.initialImageFileName`))},[]);async function v(e){e.type.startsWith(`image/`)&&(l(await new Promise((t,n)=>{let r=new FileReader;r.onload=()=>t(String(r.result??``)),r.onerror=()=>

48n(r.error),r.readAsDataURL(e)})),d(e.name),p(e),s(``),a(`image-${e.name}-${e.lastModified}`),h(null))}function y(){l($.imageSrc),d($.fileName),p(null),h(null)}async function b(t){if(!f)return;if(!r?.user){n.push(`/sign-up?callbackUrl=%2Fimage-to-markdown`);return}let i=new FormData;i.set(`file`,f,f.name),_(!0);try{let n=await ot(`/api/image-to-markdown`,i);h(n),t.setMarkdown(n.markdown||``),t.setActiveView(`preview`),J.success(`${e.creditsCharged}: ${n.creditsCharged}`)}catch(e){let t=e instanceof X?e.message:`Image to Markdown failed`;if(lt(e,t)){J.error(t),n.push(`/pricing?redirect=%2Fimage-to-markdown`);return}J.error(t)}finally{_(!1)}}return(0,Q.jsx)(q,{labels:{...e.editor,editorLabel:e.source,dropTitle:e.dropTitle,dropDescription:e.dropDescription,browse:e.uploadImage,loadExample:e.loadExample},className:t,initialMarkdown:o,exampleMarkdown:$.markdown,fileAccept:`image/*`,onSourceFile:async e=>{await v(e)},onLoadExample:y,sourceAddon:t=>(0,Q.jsxs)(`div`,{className:`grid gap-3 border-t border-border bg-background p-3 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]`,children:[(0,Q.jsx)(`div`,{className:`flex min-h-48 items-center justify-center rounded-lg border border-border bg-muted/20 p-3`,children:c?(0,Q.jsx)(`img`,{src:c,alt:u||e.previewLabel,className:`max-h-60 max-w-full rounded-md border border-border object-contain shadow-sm`}):(0,Q.jsxs)(`div`,{className:`flex flex-col items-center text-sm text-muted-foreground`,children:[(0,Q.jsx)(K,{className:`mb-2 size-8`}),e.previewLabel]})}),(0,Q.jsxs)(`div`,{className:`flex flex-col justify-between gap-3 rounded-lg border border-border bg-primary/5 p-3`,children:[(0,Q.jsxs)(`div`,{children:[(0,Q.jsx)(`p`,{className:`text-sm font-medium text-foreground`,children:f?u:e.exampleTitle}),(0,Q.jsx)(`p`,{className:`mt-1 text-xs leading-5 text-muted-foreground`,children:f?e.costLabel:e.exampleDescription}),m?(0,Q.jsxs)(`p`,{className:`mt-2 text-xs text-muted-foreground`,children:[e.creditsCharged,`: `,m.creditsCharged,` · `,e.balanceLabel,`: `,m.balance]}):null]}),(0,Q.jsx)(`div`,{className:`flex flex-wrap items-center gap-2`,children:(0,Q.jsxs)(ct,{type:`button`,size:`sm`,className:`h-8 gap-1.5`,disabled:g||!f,onClick:()=>void b(t),children:[g?(0,Q.jsx)(Y,{className:`size-4 animate-spin`}):(0,Q.jsx)(nt,{className:`size-4`}),g?e.converting:e.convertImage]})}),r?.user?null:(0,Q.jsx)(`p`,{className:`text-xs text-primary`,children:e.signInToConvert})]})]})},i)}function ft(e,t){let n=e.match(/^data:([^;]+);base64,(.+)$/);if(!n)return null;

48try{let e=atob(n[2]),r=new Uint8Array(e.length);for(let t=0;t<e.length;t++)r[t]=e.charCodeAt(t);return new File([r],t,{type:n[1]})}catch{return null}}function pt(){return(0,Q.jsxs)(`div`,{className:`min-h-screen bg-background text-foreground`,children:[(0,Q.jsx)($e,{}),(0,Q.jsxs)(`main`,{className:`px-4 py-12 sm:py-16`,children:[(0,Q.jsxs)(`section`,{className:`mx-auto max-w-6xl`,children:[(0,Q.jsx)(`p`,{className:`text-sm font-medium text-primary`,children:`TO MD`}),(0,Q.jsx)(`h1`,{className:`mt-3 font-serif text-4xl font-medium leading-tight tracking-normal sm:text-5xl`,children:R()}),(0,Q.jsx)(`p`,{className:`mt-4 max-w-2xl text-base leading-7 text-muted-foreground`,children:ge()}),(0,Q.jsx)(ut,{className:`mt-8`,labels:{source:_(),previewLabel:u(),dropTitle:j(),dropDescription:E(),uploadImage:f(),exampleTitle:k(),exampleDescription:r(),loadExample:qe(),convertImage:S(),converting:y(),costLabel:m(),creditsCharged:c(),balanceLabel:se(),signInToConvert:re(),editor:{write:ie(),preview:te(),editorLabel:Se(),previewLabel:n(),placeholder:Ce(),dropTitle:oe(),dropDescription:o(),browse:s(),loadExample:T(),paste:We(),clear:a(),cancel:w(),download:Ge(),emptyPreview:H(),bold:Ke(),italic:Ue(),bulletList:z(),numberedList:_e(),table:ye(),undo:De(),saveMarkdown:Ne(),copyHtml:he(),template:de(),layout:He(),split:Te(),focus:W(),fullscreen:Re(),exitFullscreen:je(),downloadPdf:V(),printPdf:xe(),printHint:Ie(),emptyPreviewPdf:ke(),templateGithub:Be(),templateClean:pe(),templateBusiness:e(),templateAcademic:le(),templateModern:I(),templateMinimal:N()}}})]}),(0,Q.jsx)(mt,{})]}),(0,Q.jsx)(Qe,{})]})}function mt(){let e=[{icon:K,title:me(),description:ue()},{icon:et,title:Ve(),description:we()},{icon:rt,title:U(),description:Le()},{icon:tt,title:Ae(),description:B()}],n=[Fe(),Oe(),ze(),fe()],r=[L(),P(),F(),g(),Pe(),v()],a=[M(),O(),p(),A()],o=[{question:Ye(),answer:C()},{question:ee(),answer:h()},{question:l(),answer:ce()},{question:ae(),answer:ne()}];return(0,Q.jsxs)(`section`,{className:`mx-auto mt-16 max-w-6xl space-y-12 sm:mt-20`,children:[(0,Q.jsxs)(`div`,{className:`grid gap-8 lg:grid-cols-[0.95fr_1.05fr] lg:items-start`,children:[(0,Q.jsxs)(`div`,{children:[(0,Q.jsx)(`p`,{className:`text-sm font-medium text-primary`,children:ve()}),(0,Q.jsx)(`h2`,{className:`mt-3 max-w-3xl text-3xl font-semibold tracking-normal sm:text-4xl`,children:Ee()}),(0,Q.jsx)(`p`,{className:`mt-4 text-base leading-7 text-muted-foreground`,children:Me()})]}),(0,Q.jsx)(`div`,{className:`grid gap-3 sm:grid-cols-2`,children:e.map(e=>(0,Q.jsxs)(`article`,{className:`rounded-lg border border-border bg-card p-5 shadow-sm`,children:[(0,Q.jsx)(e.icon,{className:`size-5 text-primary`}),(0,Q.jsx)(`h3`,{className:`mt-4 text-base font-semibold`,children:e.title}),(0,Q.jsx)(`p`,{className:`mt-2 text-sm leading-6 text-muted-foreground`,children:e.description})]},e.title))})]}),(0,Q.jsxs)(`div`,{className:`grid gap-6 lg:grid-cols-3`,children:[(0,Q.jsxs)(`article`,{className:`rounded-lg border border-border bg-card p-6 lg:col-span-1`,children:[(0,Q.jsx)(it,{className:`size-5 text-primary`}),(0,Q.jsx)(`h2`,{className:`mt-4 text-xl font-semibold`,children:be()}),(0,Q.jsx)(`ol`,{className:`mt-5 space-y-4`,children:n.map((e,t)=>(0,Q.jsxs)(`li`,{className:`flex gap-3 text-sm leading-6 text-muted-foreground`,children:[(0,Q.jsx)(`span`,{className:`flex size-7 shrink-0 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground`,children:t+1}),(0,Q.jsx)(`span`,{children:e})]},e))})]}),(0,Q.jsxs)(`article`,{className:`rounded-lg border border-border bg-card p-6 lg:col-span-2`,children:[(0,Q.jsx)(Ze,{className:`size-5 text-primary`}),(0,Q.jsx)(`h2`,{className:`mt-4 text-xl font-semibold`,children:t()}),(0,Q.jsx)(`p`,{className:`mt-3 text-sm leading-6 text-muted-foreground`,children:x()}),(0,Q.jsxs)(`p`,{className:`mt-3 text-sm leading-6 text-muted-foreground`,children:[`Want to see real output before uploading your own file? Review the`,` `,(0,Q.jsx)(G,{href:`/blog/jpg-to-md-example`,className:`font-medium underline underline-offset-4`,children:`JPG to MD example`}),` `,`or the`,` `,(0,Q.jsx)(G,{href:`/blog/png-to-md-example`,className:`font-medium underline underline-offset-4`,children:`PNG screenshot to Markdown`}),` `,`walkthrough.`]}),(0,Q.jsx)(`div`,{className:`mt-6 grid gap-3 sm:grid-cols-2`,children:r.map(e=>(0,Q.jsx)(`div`,{className:`rounded-md bg-muted/60 px-4 py-3 text-sm font-medium`,children:e},e))})]})]}),(0,Q.jsxs)(`div`,{className:`grid gap-6 lg:grid-cols-[0.9fr_1.1fr]`,children:[(0,Q.jsxs)(`article`,{className:`rounded-lg border border-border bg-card p-6`,children:[(0,Q.jsx)(`h2`,{className:`text-xl font-semibold`,children:d()}),(0,Q.jsx)(`ul`,{className:`mt-5 space-y-3`,children:a.map(e=>(0,Q.jsxs)(`li`,{className:`flex gap-3 text-sm leading-6 text-muted-foreground`,children:[(0,Q.jsx)(`span`,{className:`mt-2 size-1.5 shrink-0 rounded-full bg-primary`}),(0,Q.jsx)(`span`,{children:e})]},e))})]}),(0,Q.jsxs)(`article`,{className:`rounded-lg border border-border bg-card p-6`,children:[(0,Q.jsx)(`h2`,{className:`text-xl font-semibold`,children:i()}),(0,Q.jsx)(`div`,{className:`mt-4 divide-y divide-border`,children:o.map((e,t)=>(0,Q.jsxs)(`details`,{className:st(`group py-4`,t===0&&`pt-0`),children:[(0,Q.jsx)(`summary`,{className:`curs

48or-pointer list-none text-sm font-semibold marker:hidden`,children:e.question}),(0,Q.jsx)(`p`,{className:`mt-2 text-sm leading-6 text-muted-foreground`,children:e.answer})]},e.question))})]})]})]})}export{pt as component};