PrexView

REST API

HTML is the the foundation behind all web pages. It’s used to add structure and form to text, images, and more. CSS is the language used to style HTML content. In this first course, you’ll learn the fundamentals of both languages so that you can create visually appealing web pages.

HTML

Every webpage you look at is written in a language called HTML. You can think of HTML as the skeleton that gives every webpage structure. In this course, we’ll use HTML to add paragraphs, headings, images and links to a webpage.

In the editor to the right, there’s a tab called test.html. This is the file we’ll type our HTML into. See the code with the <>s? That’s HTML! Like any language, it has its own special syntax (rules for communicating).

When we press Save & Submit Code, the results tab will act like an Internet browser (e.g. Chrome, Firefox, Internet Explorer). A browser’s job is to transform the code in test.html into a recognizable webpage! It knows how to lay out the page by following the HTML syntax.

CSS

HTML and CSS HTML stands for HyperText Markup Language. Hypertext means “text with links in it.” Any time you click on a word that brings you to a new webpage, you’ve clicked on hypertext!

A markup language is a programming language used to make text do more than just sit on a page: it can turn text into images, links, tables, lists, and much more. HTML is the markup language we’ll be learning.

What makes webpages pretty? That’s CSS—Cascading Style Sheets. Think of it like skin and makeup that covers the bones of HTML. We’ll learn HTML first, then worry about CSS in later courses.

The first thing we should do is set up the skeleton of the page.

Handlebars

Handlebars templates look like regular HTML, with embedded handlebars expressions.

1
2
3
4
5
6
7
8

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>
A handlebars expression is a {{, some contents, followed by a }}

Block expressions allow you to define helpers that will invoke a section of your template with a different context than the current. These block helpers are identified by a # preceeding the helper name and require a matching closing mustache, /, of the same name. Let’s consider a helper that will generate an HTML list:

1

{{#list people}}{{firstName}} {{lastName}}{{/list}}

If we have the following context:

1
2
3
4
5
6
7

{
  people: [
    {firstName: "Yehuda", lastName: "Katz"},
    {firstName: "Carl", lastName: "Lerche"},
    {firstName: "Alan", lastName: "Johnson"}
  ]
}

we would create a helper named list to generate our HTML list. The helper receives the people as its first parameter, and an options hash as its second parameter. The options hash contains a property named fn, which you can invoke with a context just as you would invoke a normal Handlebars template.

1
2
3
4
5
6
7
8
9

Handlebars.registerHelper('list', function(items, options) {
  var out = "<ul>";
  for(var i=0, l=items.length; i<l; i++) {
    out = out + "<li>" + options.fn(items[i]) + "</li>";
  }
  return out + "</ul>";
});

When executed, the template will render:

1
2
3
4
5

<ul>
  <li>Yehuda Katz</li>
  <li>Carl Lerche</li>
  <li>Alan Johnson</li>
</ul>

Block helpers have more features, such as the ability to create an else section (used, for instance, by the built-in if helper). Since the contents of a block helper are escaped when you call options.fn(context), Handlebars does not escape the results of a block helper. If it did, inner content would be double-escaped!

Mustache

mustache.js is an implementation of the mustache template system in JavaScript.

Mustache is a logic-less template syntax. It can be used for HTML, config files, source code - anything. It works by expanding tags in a template using values provided in a hash or object.

We call it “logic-less” because there are no if statements, else clauses, or for loops. Instead there are only tags. Some tags are replaced with a value, some nothing, and others a series of values.

For a language-agnostic overview of mustache’s template syntax, see the mustache(5) manpage.

Where to use mustache.js?

You can use mustache.js to render mustache templates anywhere you can use JavaScript. This includes web browsers, server-side environments such as node, and CouchDB views.

mustache.js ships with support for both the CommonJS module API and the Asynchronous Module Definition API, or AMD.

Allowed tags

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

// HTML
'a',
'abbr',
'address',
'area',
'article',
'aside',
'b',
'bdi',
'bdo',
'blockquote',
'br',
'button',
'caption',
'cite',
'code',
'col',
'colgroup',
'datalist',
'dd',
'del',
'details',
'dfn',
'dialog',
'div',
'dl',
'dt',
'em',
'fieldset',
'figcaption',
'figure',
'footer',
'form',
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'header',
'hr',
'i',
'img',
'input',
'ins',
'kbd',
'keygen',
'label',
'legend',
'li',
'main',
'mark',
'menu',
'menuitem',
'meter',
'nav',
'ol',
'optgroup',
'option',
'output',
'p',
'param',
'pre',
'progress',
'q',
'rp',
'rt',
'ruby',
's',
'samp',
'section',
'select',
'small',
'span',
'strong',
'sub',
'summary',
'sup',
'table',
'tbody',
'td',
'textarea',
'tfoot',
'th',
'thead',
'time',
'tr',
'u',
'ul',
'var',
'wbr',
// SVG
'svg',
'g',
'defs',
'desc',
'title',
'symbol',
'use',
'switch',
'path',
'rect',
'circle',
'ellipse',
'line',
'polyline',
'polygon',
'text',
'tspan',
'tref',
'textPath',
'altGlyph',
'glyphRef',
'altGlyphItem',
'altGlyphDef'
Restrictions
Design size: 
CSS size: 
HTML size:

You can get the API_KEY by downloading and installing PrexView Studio.

1
2
3
4
5
6

curl -H "Authorization: API_KEY" \
  https://api.prexview.com/v1/transform \
  -F json="<data.json" \
  -F design="design-name" \
  -F output="pdf" \
  -o result.pdf

1

-F json="{\"hello\":\"World\"}" \

1
2
3
4
5
6

curl -H "Authorization: API_KEY" \
  https://api.prexview.com/v1/transform \
  -F xml="<data.xml" \
  -F design="design-name" \
  -F output="pdf" \
  -o result.pdf

1

-F xml=" <hello>world</hello>" \

Options

--format

Type: string Required: Yes

Data to use for the document creation, must be xml or json.

--design

Type: string Required: Yes

Design’s name to use.

1
2
3
4
5

{
  "Data": {
    "customer": "123"
  }
}

1

invoice-customer-{{Data.customer}}

1

invoice-customer-123

1

<Data customer="123"></Data>

1

invoice-customer-{{Data._customer}}

1

invoice-customer-123

--output

Type: string Required: Yes

Document response type from the service, it can be html, pdf, png or jpg.

--design-backup

Type: string

Design’s name to use to be used if the option design is not available in the service.

--note

Type: string

Custom note that can be used to add any information, it’s limit up to 500 chars. This is useful if you want to add metadata such as document, transaction or customer ID.

1
2
3
4
5

{
  "Data": {
    "customer": "123"
  }
}

1
2

Document: Invoice
Customer: {{Data.customer}}

1
2

Document: Invoice
Customer: 123

1

<Data customer="123"></Data>

1
2

Document: Invoice
Customer: {{Data._customer}}

1
2

Document: Invoice
Customer: 123