JP Engine

Powerful fast in-browser PDF generation engine based on layouts from Google tables without Adobe

Creating multiple layouts based on a template is the most common operation. So why not create these layouts automatically and directly in the browser?

How it works:

  1. Open a website page in any browser
  2. Input the data in the fields and see the preview
  3. Click "Download"

Generating this sign took around 400 lines of code and 6 hours. The input form is drawn itself.

If you specify a Google table with column arranged data, you can download all layouts in one ZIP-archive in 1 click. You can click on the layout name in the list to preview the layout before downloading.

Who can use it:

Road signs Navigation Plates Blanks Signposts Business cards

Large enterprises and transport companies

If a large company has general rules for the design of media, there is always the difficulty of controlling the appearance. There is a designer who has to draw everything.

By having the JP engine on the web service, you get a tool that can be used quickly and at any time, and you save money on licences for graphic editors.

Design studios

It is possible to build one fairly complex layout and place it on a web service in 1 day, and then use it en masse to generate scores of layouts.

You save on layout designers and possible copying errors. With access to a Google source spreadsheet, not only the designer but also the manager can generate layouts at any time.

An example

Here is the tracker template, which consists of 3 elements:

  1. The name of the direction ahead
  2. The arrow adjusted to the size of the pointer.
  3. The names of the left direction consisting of the names in white and a not required route number in yellow.
PDF в браузере

The size of the sign is determined by the content, the vertical arrow also fits the bottom border of the sign:

It took only ≈150 lines of code to generate this sign, which took about 3 hours, along with the input form that the engine knows how to draw itself.


Here is a list of the most useful features of the engine when generating navigation.

Drawing texts and vector shapes - any shapes, including masks.

Here's an example of a sign that draws 3 text and 4 shapes: 2 vector shapes of the sign, a symbol, and an arrow to the right

Fixed or dynamic sign sizes

The generator can draw fixed size signs or adjust the size of the sign in width, height or both width and height.

You can set margins and padding for all elements of a sign.

Element alignment by document size or by element stack

The generator can align objects to other objects or even to multiple objects. Each object has 9 points at which you can align an object to 9 points in another object (or array of objects). You can set offsets relative to that alignment.

Generators of PDF

Optional elements of the pattern

Some template elements may be optional, all alignment rules can be applied to adjacent elements, keeping the logic of the layout intact.

Generators of PDF

Alignment of groups themselves, as well as items within groups

In the example below, the kilometers to settlements are aligned not by one name, but by all names. At the same time, the kilometers themselves are aligned by the right edge within their "group":

PDF в браузере

Changing vector shapes without distortion - for example, fitting arrows to the sign

In the example above, the width of the sign changes, which means that you have to change the width of the vector forms. So the engine knows how to change the width without distorting the proportions or height, just by rearranging the anchor points.

It is enough to specify in the sign template:

        alignPoints: {
            right: 6,

And the selected 6 points are aligned to the right side of the sign:

Working in millimeters or points, CMYK and RGB color models

The engine creates layouts exactly in millimeters or points. Colors can be specified in CMYK or RGB color models, which is important for layouts that are sent to the printer.

Word-for-word text transfer or scaling to the desired width

Texts can be set to the maximum width to which they will be reduced by word hyphenation (hyphenation rules can be set), or scaled down to the desired width by reducing the size of.

Different text styles in 1 line

Different fonts or lettering can be used in the same text block. The engine knows how to calculate them and draw them correctly on one line.

Downloading multiple layouts in a single ZIP file

The engine is ready to download all the data laid out in columns from a Google table and generate all the layouts in a few seconds. Layouts can be viewed one at a time in the browser before downloading.

For example, the navigation pointer generator for the Yekaterinburg Design Code engine generated more than 150 layouts in 10 seconds in the browser.

Published projects

The JP engine began development in 2021, adding more and more features with each project.

2022. Generator for transit timetables и Chelyabinsk public transport timetables

The program takes the source timetable data for each of the routes and the list of stops, then instantly generates the necessary layouts.

Generator for transit timetables

2022. Advance location sign for tourist service in Finland

A small tourist signpost generator with optional elements: arrow and symbol.

2021. Navigation Signage Generator for Ekaterinburg Design Code

Instant make-up of hundreds of layouts based on Google spreadsheet data.

Navigation Signage Generator

2021. A public generator of city plates for Dnipro

Street name plates, house numbers, entrances - a total of 14 templates in the web interface.

2021 год. A public generator of street signs in Kiev

Generator of street names, house numbers.

Usage and price

The price of the generator usually consists of 2 parts: one-time template assembly and monthly use. The cost depends solely on the complexity of the layout and the method of data entry: form, Google spreadsheet or Excel.

You can send the layout in any form to or Telegram @turulin

Technical requirements

The JP engine is a client-side web application that runs in any modern browser. All that's required is JavaScript.

If you have a website where you want to mark up the generator, you will get an assembly to host it.

If you don't have your own site, you'll get access to a dedicated site where the client builds are hosted.