sonnyp/playhouse

Playground for HTML/CSS/JavaScript

Playhouse

Playground for HTML/CSS/JavaScript

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.

// 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.

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

License

GPLv3. Please see COPYING file.

playhouse's Issues

Concept of storing and loading projects/snippets

Related to issue #8, it would be nice to store the workspace/project state and load an older one. The lack of such functionality would be less severe if it wasn't a matter of multiple components making up the project (html/css/js).

A common use case for me is having multiple concept of the same thing and wanting to revisit the previous one based on new knowledge gained from taking alternative (dead end) route.

Needs design.

No preview (no output)

Hi, thanks for your app, it seems so nice to make quick experiements 😃

Unfortunatly, it seems that the app won't work properly on my system. No output at all (default HTML/CSS/JS loaded). Also, the "Inspec element" won't work too (doesn't show up). Any idea? How can I help you finding the problem?

NAME="Fedora Linux"
VERSION="38 (Thirty Eight)"
ID=fedora
VERSION_ID=38
VERSION_CODENAME=""
PLATFORM_ID="platform:f38"
PRETTY_NAME="Fedora Linux 38 (Thirty Eight)"
ANSI_COLOR="0;38;2;60;110;180"
LOGO=fedora-logo-icon
CPE_NAME="cpe:/o:fedoraproject:fedora:38"
DEFAULT_HOSTNAME="fedora"
HOME_URL="https://fedoraproject.org/"
DOCUMENTATION_URL="https://docs.fedoraproject.org/en-US/fedora/f38/system-administrators-guide/"
SUPPORT_URL="https://ask.fedoraproject.org/"
BUG_REPORT_URL="https://bugzilla.redhat.com/"
REDHAT_BUGZILLA_PRODUCT="Fedora"
REDHAT_BUGZILLA_PRODUCT_VERSION=38
REDHAT_SUPPORT_PRODUCT="Fedora"
REDHAT_SUPPORT_PRODUCT_VERSION=38
SUPPORT_END=2024-05-14

Allow rearranging and/or splitting sections to new window

Currently the window positioning is fixed except for setting the hight for the dev tools. Consider allowing sections to be split in to new windows and allow for rearranging sections.

Soft-Wrap

Is there any possibility for a soft-wrap in the code? It is very annyoing to code in HTML, CSS and JS without it (at least, I didn't find any button to do it.)

Consider submitting playhouse to Flathub

Playhouse is great but unfortunately it is missing from flathub, so the recommendation falls through with more casual users since you have to build from scratch. It would be great if you could consider submitting your application to flathub! 🚀

https://github.com/flathub/flathub/wiki/App-Submission

Needs an icon

And possibly a new name?

As analogy I liked the web thingy they have on playgrounds.

https://duckduckgo.com/?q=playground+web&t=h_&iax=images&ia=images

@bertob thoughts?

Allow disabling JavaScript autorun

Depending on what you're doing, it can get in the way.

Migrate to GNOME 46 runtime

Flatpak warning:

Info: runtime org.gnome.Platform branch 44 is end-of-life, with reason:
The GNOME 44 runtime is no longer supported as of March 20, 2024.

Export current state

Currently one can either lookup the HTML/CSS/JS files in the app's data directory, copy those files, and then connect them by manually adding link and script tags or one can copy paste the panel contents into new files.

It would be an improvement if one could export the current state directly from the application itself. Such an function could either create a HTML file with the CSS and JS injected, a directory or a zip-file.