rapipdf

<!doctype html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"> <meta name="description" content="RapiPdf is Web Component based Swagger & OpenAPI Spec to PDF generator"> <meta name="keywords" content="RapiPdf, RapiDoc, ReDoc, Swagger, SwaggerUI, Custom Element, Web Component, OpenAPI, REST"> <link rel="shortcut icon" type="image/png" href="./images/logo.png"/>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-132775238-2"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-132775238-2'); </script>  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">  <link rel="stylesheet" href="./highlight/styles/zenburn.css"> <script src="./highlight/highlight.pack.js"></script> <script>hljs.initHighlightingOnLoad();</script> <script type="text/javascript" src="rapipdf-min.js" defer></script> <link rel="stylesheet" href="index.css"> <title>RapiPDF - Web Component based Swagger & OpenAPI PDF Generator</title> </head> <body> <div class="banner container" id="banner"> <div class="header"> <img class="logo" src="./images/logo-outline.png" style="width:48px;height:48px;margin-right:10px;" /> <div class="product-name">RapiPDF</div> <div class="menu" style="flex:1"></div> <nav class="menu" onclick="goToSection(event)"> <a class="menu-item" href="#features"> Features </a> <a class="menu-item" href="#qstart"> Quick Start </a> <a class="menu-item" data-action="url" href="./api.html"> API </a> <a class="menu-item" data-action="url" href="https://mrin9.github.io/RapiDoc/"> RapiDoc </a> <a class="menu-item" data-action="git" href="https://github.com/mrin9/RapiPdf"> GitHub </a> </nav> </div> <div> <div class="banner-content"> <h1 class="banner-title">Web Component to generate PDF from OpenAPI Spec</h1> <div class="banner-content-inner"> <p style="font-size:18px">Create beautiful, customizable API documentation in PDF format from your OpenAPI Specification</p> </div> </div> </div> <div style="display:flex; justify-content: center;"> <div style="display:block"> <img class="screenshot shadow3" src="./images/pdf_sample1.png" /> </div> </div> </div> <div class="features container" id="features"> <div class="feature"> <object type="image/svg+xml" data="./images/webcomponent.svg" style="width:64px; height:64px;"> </object> <div class="feature-info"> <div class="feature-title"> Web Component Standard</div> <div class="feature-descr"> Free of any frameworks, setups, configs, build steps or packaging. Can be used with any framework or just with vanilla javascript </div> </div> </div> <div class="feature"> <object type="image/svg+xml" data="./images/easy.svg" style="width:64px; height:64px;"> </object> <div class="feature-info"> <div class="feature-title"> Easy Usage</div> <div class="feature-descr"> Use It just like any other HTML Tag, use its various attributes to customize the generation of your PDF. Basic knowledge of HTML is all that's required </div> </div> </div> <div class="feature"> <object type="image/svg+xml" data="./images/mask.svg" style="width:64px; height:64px;"> </object> <div class="feature-info"> <div class="feature-title">Customizable</div> <div class="feature-descr"> Change font colors to match your brand colors. Pick and choose the sections from the API Spec that you want to include in the PDF. </div> </div> </div> <div class="feature"> <object type="image/svg+xml" data="./images/gears.svg" style="width:64px; height:64px;"> </object> <div class="feature-info"> <div class="feature-title"> Seamlessly interoperable</div> <div class="feature-descr"> Loved by tech writers, designers, dev-ops, testers and developers alike, due to its simplicity, interoperability and powerful features. </div> </div> </div> </div> <div id="qstart" class="qstart container"> <div style="display:flex; flex-direction: column; "> <h2> Quickstart & Demo</h2> Just copy the below code and save it in an html file. Then open it using a browser <pre class="shadow code-block"><code class="html" style="border-radius:4px"> <!doctype html> <html> <head> <script src="https://unpkg.com/rapipdf/dist/rapipdf-min.js"></script> </head> <body> <rapi-pdf style = "width:700px; height:40px; font-size:18px;" spec-url = "https://mrin9.github.io/RapiPdf/examples/specs/petstore.json" button-bg = "#b44646" > </rapi-pdf> </body> </html> </code></pre> <div> Go ahead, provide your Open API spec and click GENERATE PDF !!! </div> <rapi-pdf id='rapipdf' style="width:730px; height:40px; font-size:18px;" spec-url="https://mrin9.github.io/RapiPdf/specs/petstore.json" button-bg="#b44646" pdf-title="API Reference" > </rapi-pdf> <div style="margin-top:16px;"> With different Color scheme </div> <rapi-pdf id='rapipdf' style="width:730px; height:40px; font-size:18px;" spec-url="https://mrin9.github.io/RapiPdf/specs/petstore.json" pdf-schema-style="table" button-bg="#b44646" pdf-primary-color="teal", pdf-alternate-color="darkred" pdf-title="API Reference" > </rapi-pdf> <div style="margin-top:16px;"> With an alternate request/response model represnation style </div> <rapi-pdf id='rapipdf' style="width:730px; height:40px; font-size:18px;" spec-url="https://mrin9.github.io/RapiPdf/specs/petstore.json" pdf-schema-style="table" button-bg="#b44646" pdf-title="API Reference" > </rapi-pdf> </div> </div> <div id="footer" class="footer container"> <div class="footer-item"> MIT Licence</div> <div class="footer-item"> <a href="https://github.com/mrin9/RapiPdf"> GitHub</a></div> <div class="footer-item"> <a href="https://www.npmjs.com/package/rapipdf"> npm</a></div> </div> <script> function goToSection(e){ if (e.target.dataset.action==='git' || e.target.dataset.action==='url' ){ return; } e.preventDefault(); var gotoEl = document.getElementById(e.target.getAttribute('href').substring(1)); if (gotoEl){ gotoEl.scrollIntoView({ block: 'start', behavior: 'smooth' }); } } </script> </body> </html>