PRESENTA Lib

The javascript
presentation library
for the automation era.

$ npm install @presenta/lib
14Kb gzipped

Text 👉 Presentation

Text sentences to interactive Presentation.

Convert a simple text array to a full interactive presentation using the following code:

// your data
const data = [
    'Hello There!',
    'It\'s PRESENTA Lib here!',
    'I can create presentational documents from data.',
    'Any kind of data 🙂'
]

// remap the dataset with the template' required fields
const frames = data.map((text,index) => ({text, page: index+1}))

// create the final config using @presenta/config-interpolator
const config = await interpolate({frames}, templateConfig)

// create the document within your wrapper
await new Presenta('#wrapper', config)

// have fun!

Images 👉 Gallery

Image array to interactive Gallery.

Convert a list of images path to a full interactive gallery using the following code:

// your data
const frames = []
for(let i=0; i < 16; ++i){
    if(i % 4 === 0){
        frames.push({
            i1: 'https://source.unsplash.com/random',
            i2: 'https://source.unsplash.com/random',
            i3: 'https://source.unsplash.com/random',
            i4: 'https://source.unsplash.com/random'
        })
    }
}

// create the final config using @presenta/config-interpolator
const config = await interpolate({frames}, templateConfig)

// create the document within your wrapper
await new Presenta('#wrapper', config)

Airtable 👉 Showcase

Turn Airtable products to Showcase.

Fetch a product list table using the Airtable API and build a product showcase with few lines of code:

const products = await fetchAirtable // your fetch implementation

// remap the dataset with the template' required fields
const frames = products.map(d => {
    return {
        type: d.fields.Type,
        name: d.fields.Name,
        price: '$' + d.fields['Unit cost'],
        imagebg: d.fields.Images[0].url,
        imagefg: d.fields.Images[0].url
    }
})

const config = await interpolate({frames}, templateConfig)
await new Presenta('#wrapper', config)

// done!

Unsplash 👉 Gallery

Search Unsplash, build a gallery.

Fetch a bunch of images on Unsplash API and build an image gallery using a powerful template.
(Select between pre-backed searches for demo purposes)

Cat
Dog
Bike

Wordpress 👉 Catalog

Fetch Wordpress API, build a product catalog.

Fetch a list of Product items on Wordpress API and build a real product catalog using a powerful template.
(Select between pre-backed fetches from Wordpress.com demos)

Huntt
Rebalance
Boardwalk

Markdown 👉 Slides

Turn Markdown into a Pitch.

Convert Markdown, or any other structured markup, into an interactive Presentation.
(You can edit live the following Markdown)