Files
pdfme/index.html
2026-04-03 16:30:56 +09:00

25 lines
20 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en" dir="ltr" class="plugin-pages plugin-id-default" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v3.9.2">
<title data-rh="true">Free and Open source PDF generation library! | pdfme</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://pdfme.com/img/ogimage.png"><meta data-rh="true" name="twitter:image" content="https://pdfme.com/img/ogimage.png"><meta data-rh="true" property="og:url" content="https://pdfme.com/"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" property="og:locale:alternate" content="ja"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docusaurus_tag" content="default"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docsearch:docusaurus_tag" content="default"><meta data-rh="true" property="og:title" content="Free and Open source PDF generation library! | pdfme"><meta data-rh="true" name="description" content="Free and Open source PDF generation library fully written in TypeScript, featuring a React-based UI template editor for efficient PDF creation."><meta data-rh="true" property="og:description" content="Free and Open source PDF generation library fully written in TypeScript, featuring a React-based UI template editor for efficient PDF creation."><link data-rh="true" rel="icon" href="/favicon.ico"><link data-rh="true" rel="canonical" href="https://pdfme.com/"><link data-rh="true" rel="alternate" href="https://pdfme.com/" hreflang="en"><link data-rh="true" rel="alternate" href="https://pdfme.com/ja/" hreflang="ja"><link data-rh="true" rel="alternate" href="https://pdfme.com/" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://V6YWG1D4SV-dsn.algolia.net" crossorigin="anonymous"><script data-rh="true">function insertBanner(){var n=document.createElement("div");n.id="__docusaurus-base-url-issue-banner-container";n.innerHTML='\n<div id="__docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseUrl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">/</span> (default value)</p>\n <p>We suggest trying baseUrl = <span id="__docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;"></span></p>\n</div>\n',document.body.prepend(n);var e=document.getElementById("__docusaurus-base-url-issue-banner-suggestion-container"),s=window.location.pathname,o="/"===s.substr(-1)?s:s+"/";e.innerHTML=o}document.addEventListener("DOMContentLoaded",function(){void 0===window.docusaurus&&insertBanner()})</script><link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://www.googletagmanager.com">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1Z2MZW44WP"></script>
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-1Z2MZW44WP",{})</script>
<link rel="search" type="application/opensearchdescription+xml" title="pdfme" href="/opensearch.xml">
<script src="https://media.ethicalads.io/media/client/ethicalads.min.js" async></script><link rel="stylesheet" href="/assets/css/styles.5431d87a.css">
<script src="/assets/js/runtime~main.19c5c7c8.js" defer="defer"></script>
<script src="/assets/js/main.626013e7.js" defer="defer"></script>
</head>
<body class="navigation-with-keyboard">
<svg style="display: none;"><defs>
<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
</defs></svg>
<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||"light"),document.documentElement.setAttribute("data-theme-choice",t||"light")}(),function(){try{const a=new URLSearchParams(window.location.search).entries();for(var[t,e]of a)if(t.startsWith("docusaurus-data-")){var n=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(n,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"><link rel="preload" as="image" href="/img/logo.svg"><link rel="preload" as="image" href="/img/template.png"><link rel="preload" as="image" href="/img/designer.png"><link rel="preload" as="image" href="/img/generator.png"><link rel="preload" as="image" href="/img/form.png"><link rel="preload" as="image" href="https://contrib.rocks/image?repo=pdfme/pdfme"><link rel="preload" as="image" href="https://img.shields.io/static/v1?label=Sponsor&amp;message=%E2%9D%A4&amp;logo=GitHub&amp;color=%23fe8e86"><link rel="preload" as="image" href="https://opencollective.com/webpack/donate/button@2x.png?color=blue"><link rel="preload" as="image" href="/img/please-star.png"><link rel="preload" as="image" href="/img/github-icon.svg"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="theme-announcement-bar announcementBar_mb4j" role="banner"><div class="announcementBarPlaceholder_vyr4"></div><div class="content_knG7 announcementBarContent_xLdY">🚀 &nbsp; Check out our new <a target="_blank" rel="noopener noreferrer" href="https://deepwiki.com/pdfme/pdfme">DeepWiki</a>! Ask interactive questions on docs and source code. &nbsp; 🧑‍💻</div><button type="button" aria-label="Close" class="clean-btn close closeButton_CVFx announcementBarClose_gvF7"><svg viewBox="0 0 15 15" width="14" height="14"><g stroke="currentColor" stroke-width="3.1"><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path></g></svg></button></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><b class="navbar__title text--truncate">pdfme</b></a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/templates">Examples</a><a class="navbar__item navbar__link" href="/template-design">Template Design</a><a href="https://github.com/pdfme/pdfme" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><a href="https://discord.gg/xWPTJbmgNV" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Discord<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><a href="https://app.pdfme.com?utm_source=website&amp;utm_content=navbar" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Try pdfme Cloud<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><a href="https://app.pdfme.com/contact?utm_source=website&amp;utm_content=navbar" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Contact<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link"><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" class="iconLanguage_nlXk"><path fill="currentColor" d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"></path></svg>English</a><ul class="dropdown__menu"><li><a href="/" target="_self" rel="noopener noreferrer" class="dropdown__link dropdown__link--active" lang="en">English</a></li><li><a href="/ja/" target="_self" rel="noopener noreferrer" class="dropdown__link" lang="ja">日本語</a></li></ul></div><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP systemToggleIcon_QzmC"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search (Meta+k)" aria-keyshortcuts="Meta+k"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8" stroke="currentColor" fill="none" stroke-width="1.4"></circle><path d="m21 21-4.3-4.3" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><header class="hero hero--primary"><div class="container"><div class="row" style="align-items:center;flex-direction:row-reverse"><div class="col col--6" style="text-align:center"><img src="/img/logo.svg" alt="logo" width="300" class=""></div><div class="col col--6"><h1 class="hero__title">pdfme<!-- -->: <!-- -->Free and Open source PDF generation library!</h1><p class="hero__subtitle">A powerful PDF generation library fully written in TypeScript, featuring a React-based UI template editor for seamless PDF creation*.<br>Open source, community-driven, and completely free for PDF generation under the MIT license!</p><strong>* The PDF generation library and the UI editor can be used separately.</strong></div></div><div class="row row--no-gutters" style="align-items:center"><div class="col col--3" style="margin-top:1rem"><a class="button button--lg button--success" href="/docs/getting-started">Documentation</a></div><div class="col col--3" style="margin-top:1rem"><a class="button button--lg button--info" href="https://playground.pdfme.com" target="_blank">Playground</a></div><div class="col col--6"></div></div></div></header><main><div class="container"><div class="padding-vert--lg"><div class="col col--12 margin-vert--lg text--center"><h2 class="margin-top--lg">Simple. Yet a powerful PDF generation library.</h2><div style="width:100%;max-width:900px;margin:0 auto"><div style="width:100%;aspect-ratio:16/9;display:block"><iframe src="https://www.youtube.com/embed/cmdlOHdrVBk?si=vTMjYcyUqhQ9usBY" title="YouTube video player" style="width:100%;height:100%;border:0;display:block" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe></div></div><p>pdfme provides PDF generation, forms, and a viewer centered on JSON templates.<br>Additionally, templates can be easily created using the designer.</p></div><div class="row margin-vert--lg"><div class="col col--6 margin-vert--md"><div class="card"><div class="card__header"><h2 id="template">PDF Generation Template</h2></div><div class="card__image"><img src="/img/template.png" alt="Template image"></div><div class="card__body"><h3>A template is composed by a basePdf and a Schema</h3><small>Templates are at the core of pdfme. In fact a template can be used with the Generator, the Form, and the Viewer.</small></div><div class="card__footer"><a class="button button--lg button--primary button--block" href="/docs/getting-started#template">Learn more about PDF Generation Templates</a></div></div></div><div class="col col--6 margin-vert--md"><div class="card"><div class="card__header"><h2 id="designer">Template Designer</h2></div><div class="card__image"><img src="/img/designer.png" alt="Designer image"></div><div class="card__body"><h3>Easily create templates with a WYSIWYG editor</h3><small>The Designer can be integrated into your application. It is written in vanilla JavaScript, making integration effortless regardless of the framework.</small></div><div class="card__footer"><a class="button button--lg button--primary button--block" href="/docs/getting-started#designer">Learn more about the Designer</a></div></div></div><div class="col col--6 margin-vert--md"><div class="card"><div class="card__header"><h2 id="generate">PDF Generation</h2></div><div class="card__image"><img src="/img/generator.png" alt="Generator image"></div><div class="card__body"><h3>High-performance PDF generation</h3><small>Most PDF generations complete within tens to hundreds of milliseconds. The Generator provides a simple interface that accepts a template and input data, making it very easy to use.</small></div><div class="card__footer"><a class="button button--lg button--primary button--block" href="/docs/getting-started#generator">Learn more about PDF Generation</a></div></div></div><div class="col col--6 margin-vert--md"><div class="card"><div class="card__header"><h2 id="form">Data collection with Form</h2></div><div class="card__image"><img src="/img/form.png" alt="Form image"></div><div class="card__body"><h3>Create forms using templates</h3><small>You can create forms that allow for easy input of template variables. When generating a PDF, the form&#x27;s input values are used to create the document.</small></div><div class="card__footer"><a class="button button--lg button--primary button--block" href="/docs/getting-started#form">Learn more about Form</a></div></div></div></div></div><div class="padding-vert--lg col col--12 margin-vert--lg text--center"><div><h2 class="margin-top--lg">We are Open Source❤</h2><p>pdfme is an open source project and we love contributions.<br>We are always looking for contributors to help us improve our project.</p></div><div class="margin-vert--lg"><h3 style="margin-bottom:20px">Contributors</h3><div><a href="https://github.com/pdfme/pdfme/graphs/contributors"><img src="https://contrib.rocks/image?repo=pdfme/pdfme"></a></div></div><div class="margin-vert--lg"><h3>Support pdfme</h3><div style="display:flex;justify-content:center;align-items:center"><a href="https://github.com/sponsors/pdfme" target="_blank" style="margin:20px"><img alt="GitHub Sponsors" src="https://img.shields.io/static/v1?label=Sponsor&amp;message=%E2%9D%A4&amp;logo=GitHub&amp;color=%23fe8e86" width="190"></a><a href="https://opencollective.com/pdfme/donate" target="_blank" style="margin:20px"><img src="https://opencollective.com/webpack/donate/button@2x.png?color=blue" width="250"></a></div></div><div class="col col--12 margin-vert--lg padding-vert--lg text--center"><div style="display:flex;align-items:center;justify-content:center"><div style="width:fit-content"><div style="display:flex;max-width:350px"><img src="/img/please-star.png" alt="pleaseStar"></div><div style="display:flex;align-items:flex-start;margin:0.8rem"><a style="display:flex;align-items:center;font-size:10pt" href="https://github.com/pdfme/pdfme" target="_blank" rel="noopener noreferrer"><img src="/img/github-icon.svg" alt="github" width="25"><span style="margin-left:0.5rem">https://github.com/pdfme/pdfme</span></a><div style="display:flex;align-items:center"><div style="margin-left:0.5rem"><span><a href="https://github.com/pdfme/pdfme" data-size="large" data-icon="octicon-star" data-show-count="true" aria-label="Star pdfme on GitHub">Star</a></span></div></div></div></div></div></div></div></div></main></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Documentation</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/docs/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/supported-features">Supported Features</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/templates">Examples</a></li><li class="footer__item"><a class="footer__link-item" href="/template-design">Template Design</a></li><li class="footer__item"><a href="https://app.pdfme.com?utm_source=website&amp;utm_content=footer" target="_blank" rel="noopener noreferrer" class="footer__link-item">Try pdfme Cloud<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/pdfme/pdfme" target="_blank" rel="noopener noreferrer" class="footer__link-item">Github<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://discord.gg/xWPTJbmgNV" target="_blank" rel="noopener noreferrer" class="footer__link-item">Discord<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2026 pdfme</div></div></div></footer></div>
</body>
</html>