All Projects → RelaxedJS → Relaxed

RelaxedJS / Relaxed

Licence: isc
Create PDF documents using web technologies

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to Relaxed

Gulp Pug Starter
Frontend development with pleasure. Pug + SCSS version
Stars: ✭ 228 (-98.04%)
Mutual labels:  scss, pug
Nth Start Project
Startkit for HTML / CSS / JS pages layout.
Stars: ✭ 578 (-95.04%)
Mutual labels:  scss, pug
Compile Hero
🔰Visual Studio Code Extension For Compiling Language
Stars: ✭ 169 (-98.55%)
Mutual labels:  scss, pug
Hexo Theme Snark
An hexo theme with lofter style
Stars: ✭ 45 (-99.61%)
Mutual labels:  scss, pug
Html2pug
Converts HTML to Pug 🐶
Stars: ✭ 118 (-98.99%)
Mutual labels:  converter, pug
Webpack Pug Scss Boilerplate
📂 Webpack 4 based boilerplate for building apps
Stars: ✭ 135 (-98.84%)
Mutual labels:  scss, pug
Pug Starter
Simple pug (jade) starter [framework] enabling faster delivery of HTML & CSS projects to a private server and/or automatic deployment of GitHub pages.
Stars: ✭ 328 (-97.19%)
Mutual labels:  scss, pug
Css Flags
A collection of pure CSS flags, all single divs.
Stars: ✭ 90 (-99.23%)
Mutual labels:  scss, pug
Wordless
All the power of Pug, Sass, Coffeescript and WebPack in your WordPress theme. Stop writing themes like it's 1998.
Stars: ✭ 1,374 (-88.21%)
Mutual labels:  scss, pug
Gulp Starter Kit
A simple Gulp 4 Starter Kit for modern web development.
Stars: ✭ 134 (-98.85%)
Mutual labels:  scss, pug
Generator Jekyll Starter Kit
🚀 Jekyll Progressive Web App Generator.
Stars: ✭ 139 (-98.81%)
Mutual labels:  scss, pug
Secret Agent
The web browser that's built for scraping.
Stars: ✭ 151 (-98.7%)
Mutual labels:  chromium
Core
Server core components which are a part of ONLYOFFICE Document Server
Stars: ✭ 152 (-98.7%)
Mutual labels:  converter
Flexible Grid
Flexible grid layouts to get you familiar with building within the flexible grid system.(HTML, CSS, SASS, SCSS)
Stars: ✭ 154 (-98.68%)
Mutual labels:  scss
Curl To Csharp
curl to C# converter
Stars: ✭ 153 (-98.69%)
Mutual labels:  converter
Html To Markdown
⚙️ Convert HTML to Markdown. Even works with entire websites and can be extended through rules.
Stars: ✭ 155 (-98.67%)
Mutual labels:  converter
Kindling
A pocket-sized grid system built on the flex display property.
Stars: ✭ 155 (-98.67%)
Mutual labels:  scss
Whimsical
A curated list of websites with an extra bit of fun.
Stars: ✭ 153 (-98.69%)
Mutual labels:  scss
React Native Sass Transformer
Use Sass to style your React Native apps.
Stars: ✭ 151 (-98.7%)
Mutual labels:  scss
Gorko
A tiny Sass token class generator.
Stars: ✭ 151 (-98.7%)
Mutual labels:  scss

ReLaXed

Build Status

ReLaXed creates PDF documents interactively using HTML or Pug (a shorthand for HTML). It allows complex layouts to be defined with CSS and JavaScript, while writing the content in a friendly, minimal syntax close to Markdown or LaTeX.

Here it is in action in the Atom editor:

And here are a few output examples:

Book - source / PDF Letter - Source / PDF Resume - Source / PDF Visit card - Source / PDF
Slides - Source / PDF Report - Source / PDF Paper - Source / PDF Poster - Source / PDF

ReLaXed has support for Markdown, LaTeX-style mathematical equations (via MathJax), CSV conversion to HTML tables, plot generation (via Vega-Lite or Chart.js), and diagram generation (via mermaid). Many more features can be added simply by importing an existing JavaScript or CSS framework.

Installing ReLaXed

Install ReLaXed via NPM with this command (do not use sudo):

npm i -g relaxedjs

This will provide your system with the relaxed command. If the installation fails, refer to the troubleshooting page. You can also use ReLaXed via Docker (see this repository)

Getting started

To start a project, create a new document my_document.pug with the following Pug content:

h1 My document's title
p A paragraph in my document

Then start ReLaXed from a terminal:

relaxed my_document.pug

ReLaXed will generate my_document.pdf from my_document.pug, then watch its directory and subdirectories so that every time a file changes, my_document.pdf will be re-generated.

It is also possible to generate the PDF file just once, with no sub-sequent file-watching, with this command:

relaxed my_document.pug --build-once

To go further:

Why yet another PDF document creator?

Many of us prefer markup languages (Markdown, LaTeX, etc.) to GUI document-editors like MS Office or Google Docs. This is because markup languages make it easier to quickly write documents in a consistent style.

However, Markdown is limited to the title/sections/paragraphs structure, and LaTeX has obscure syntax and errors that also make it difficult to stray from the beaten track.

On the other hand, web technologies have never looked so good.

  • Beautiful CSS frameworks make sure your documents look clean and modern.
  • There are JavaScript libraries for pretty much anything: plotting, highlight code, rendering equations...
  • Millions of people (and growing) know how to use these.
  • Shorthand languages like Pug and SCSS are finally making it fun to write HTML and CSS.
  • (Headless) web browsers can easily turn web documents into PDF, on any platform.

ReLaXed is an attempt at finding the most comfortable way to leverage this for desktop PDF creation.

How ReLaXed works

ReLaXed consists of a few lines of code binding together other software. It uses Chokidar to watch the file system. When a file is changed, several JavaScript libraries are used to compile SCSS, Pug, Markdown, and diagram files (mermaid, flowchart.js, Chart.js) into an HTML page which is then printed to a PDF file by a headless instance of Chromium (via Puppeteer).

Using it as a Node Module

MasterToPDF.js is exposed by default as main package, which can be used directly.

An Example:

const { masterToPDF } = require('relaxedjs');
const puppeteer = require('puppeteer');
const plugins = require('relaxedjs/src/plugins');
const path = require('path');

class HTML2PDF {
  constructor() {
    this.puppeteerConfig = {
      headless: true,
      args: [
        '--no-sandbox',
        '--disable-translate',
        '--disable-extensions',
        '--disable-sync',
      ],
    };

    this.relaxedGlobals = {
      busy: false,
      config: {},
      configPlugins: [],
    };

    this._initializedPlugins = false;
  }

  async _initializePlugins() {
    if (this._initializedPlugins) return; // Do not initialize plugins twice
    for (const [i, plugin] of plugins.builtinDefaultPlugins.entries()) {
      plugins.builtinDefaultPlugins[i] = await plugin.constructor();
    }
    await plugins.updateRegisteredPlugins(this.relaxedGlobals, '/');

    const chrome = await puppeteer.launch(this.puppeteerConfig);
    this.relaxedGlobals.puppeteerPage = await chrome.newPage();
    this._initializedPlugins = true;
  }

  async pdf(templatePath, json_data, tempHtmlPath, outputPdfPath) {
    await this._initializePlugins();
    if (this._initializedPlugins) {
      // Paths must be absolute
      const defaultTempHtmlPath = tempHtmlPath || path.resolve('temp.html');
      const defaultOutputPdfPath =
        outputPdfPath || path.resolve('output.pdf');

      await masterToPDF(
        templatePath,
        this.relaxedGlobals,
        defaultTempHtmlPath,
        defaultOutputPdfPath,
        json_data
      );
    }
  }
}

module.exports = new HTML2PDF();

Usage:

const HTML2PDF = require('./HTML2PDF.js');
(async () => {
    await HTML2PDF.pdf('./template.pug', {"a":"b", "c":"d"});
})();

Contribute!

ReLaXed is an open-source framework originally written by Zulko and released on Github under the ISC licence. Everyone is welcome to contribute!

For bugs and feature requests, open a Github issue. For support or Pug/HTML-related questions, ask on Stackoverflow or on the brand new reddit/r/relaxedjs forum, which can be used for any kind of discussion.

Projects members:

License

ISC

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].