https://github.com/sonnyp/playhouse

Playground for HTML/CSS/JavaScript
https://github.com/sonnyp/playhouse

desktop flatpak gjs gnome gtk gtk4 linux linux-app webkitgtk

Last synced: about 1 month ago
JSON representation

Playground for HTML/CSS/JavaScript

• Host: GitHub
• URL: https://github.com/sonnyp/playhouse
• Owner: sonnyp
• License: gpl-3.0
• Created: 2022-01-02T14:08:46.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-05-19T08:11:04.000Z (9 months ago)
• Last Synced: 2024-12-17T13:47:34.033Z (about 2 months ago)
• Topics: desktop, flatpak, gjs, gnome, gtk, gtk4, linux, linux-app, webkitgtk
• Language: JavaScript
• Homepage: https://flathub.org/apps/re.sonny.Playhouse
• Size: 633 KB
• Stars: 149
• Watchers: 4
• Forks: 10
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: COPYING

Awesome Lists containing this project

README

        


# Playhouse

Playground for HTML/CSS/JavaScript

![screenshot](data/screenshot.png)



## About

Playhouse make it easy to prototype, teach, design, learn and build Web things.

Features:

- HTML/CSS/JavaScript editors

- live Web preview

- auto-save

- standard keyboard shortcuts

- developer tools

- dark/light mode support

## Tips an tricks

### How can I use a library?

Use https://unpkg.com/ and dynamic imports in the `JavaScript` panel.

```js

// Example of loading a library that supports ES modules

import("https://unpkg.com/[email protected]/esm/index.js?module")

  .then((datefns) => {

    console.log(datefns.add(new Date(), { days: 2 }));

  })

  .catch(console.error);

// Example of loading a library that registers on the global object

import("https://unpkg.com/[email protected]/dist/jquery.js")

  .then(() => {

    $("p").hide();

  })

  .catch(console.error);

```

## Development

Use [GNOME Builder](https://apps.gnome.org/app/org.gnome.Builder/).

Press Ctrl+Shift+D for the GTK inspector.

## Credits

Playhouse would not be possible without

GTK, GLib, Flatpak, GtkSourceView, libadwaita, GJS, Blueprint, WebkitGTK

and the GNOME community 🖤

## Copyright

© 2022 [Sonny Piers](https://github.com/sonnyp)

## License

GPLv3. Please see [COPYING](COPYING) file.