Project Overview

Wouldn't it be great if we could use a slideshow canvas as WSIWYG editor to rapidly design and ship UIs or start coding?

Airppt was built from the ground up to utilize the design elements of PPT presentations and reuse them anywhere. It is built with modularity, extensibility and flexibility in mind whilst abstracting a lot of the complexity. It's not a direct PPTX -> HTML converter; more like PPTX -> JSON -> HTML instead.

airppt-parser

Powerpoint stores information in a series of complex XML mappings. Checkout the OpenXML Spec to get an idea of how complex it really is.

The parser reads a Powerpoint file and parses it to a standardized JSON object. The JSON object returned is defined as a PowerPointElement.

After utilizing the parser, we can pass it on to the renderer module to generate clean HTML/CSS, or you could use the object as you wish in your own application.

Usage

I highly recommend looking at the tests folder. I continually keep that up-to-date. Be sure to get the latest package from NPM.

let { AirParser } = require("airppt-parser");

let pptParser = new AirParser("./sample.pptx");
waitForParsing();

async function waitForParsing() {
    let result = await pptParser.ParsePowerPoint();

    //returns an array of parsable slides including
    //Powerpoint Elements and some extra MetaData
    console.log(result);
}

Powerpoint Element

Here is the interface definition of a PowerpointElement:

export interface PowerpointElement {
    name: string;
    shapeType: ElementType;
    specialityType: SpecialityType;
    elementPosition: {
        x: number,
        y: number
    };
    elementOffsetPosition: {
        cx: number,
        cy: number
    };
    paragraph?: {
        text: string,
        textCharacterProperties: {
            fontAttributes: FontAttributes[],
            font: string,
            size: number,
            fillColor: string
        },
        paragraphProperties: {
            alignment: TextAlignment
        }
    };
    shape?: {
        border?: {
            thickness: number,
            color: string,
            type: BorderType,
            radius?: number
        },
        fill: {
            fillType: FillType,
            fillColor: string
        },
        opacity: number
    };
    fontStyle?: {
        font: string,
        fontSize: number,
        fontColor: string
    };
    links?: {
        Type: LinkType,
        Uri: string
    };
    raw: any;
}

There's are also a number of enums as well. See the entire interface here.