Newlyweds Proposing Marriage

    @christianliebel/paint

    1.1.1 • Public • Published

    Paint: An open-source, Web Components-based remake of MS Paint using modern web capabilities

    Node.js CI Known Vulnerabilities GitHub

    Paint is back—right in your browser! Try it on paint.js.org.

    Paint

    This project aims to demonstrate modern web capabilities and Web Component-based application architectures on the example of a productivity app dinosaur: Paint. All offline-capable and installable, just as Progressive Web Apps should be.

    PLEASE NOTE

    This project is in an early state. Not all tools and actions are implemented right now. Your help and feedback are wanted!

    Modern Web Technology

    This project demonstrates the use of:

    Goals

    • This implementation tries to stick as closely as possible to the original Paint for Windows 95—not more, but also not less. You might want to check out Felix Rieseberg’s windows95 to run the original Paint.
    • This implementation should stay smaller (= transferred bytes) than Paint’s executable size of 340K.
    • Everything must be achieved with native web technology only, so no Cordova or Electron builds. Features that are not exposed to the web must be disabled in the menu.
    • Where modern web APIs are used, they should be progressively enhanced.

    Setup

    1. Clone this repository
    2. Run npm i
    3. Run npm start
    4. Done!

    Using the Web Component

    Paint is available as a web component, so you can easily embed it into other applications or websites.

    1. Install the library
      • Download the npm package @christianliebel/paint and register the elements by importing the library: import '@christianliebel/paint';
      • Alternatively, use a service like unpkg.com: <script src="https://unpkg.com/@christianliebel/paint/dist/elements/index.js" type="module"></script>
    2. Use the <paint-app> component in your application.
    3. Optional: If you want to react to changes of the document title, listen to the titlechange event. You can find the updated title in the event.details.title property.
    4. Done!

    Wait, I’ve seen this before

    You’re right! The awesome JSPaint (GitHub) has been around for a long time and is, by far, more complete. In contrast to JSPaint, this project is licensed under an OSS license, so you can fork this repository, use it in your demos, and contribute. Please do not copy over code from JSPaint to this repository.

    License

    This project is provided for educational purposes only. It is not affiliated with and has not been approved by Microsoft.

    Keywords

    none

    Install

    npm i @christianliebel/paint

    DownloadsWeekly Downloads

    5,242

    Version

    1.1.1

    License

    Apache-2.0

    Unpacked Size

    658 kB

    Total Files

    136

    Last publish

    Collaborators

    • christianliebel