BrowserFS VS html-to-image

I think JupyterLite is using localStorage by default. But there are File System APIs for WASM and some external projects[0], I don't think they're yet integrated.

[0] https://github.com/jvilk/BrowserFS

I started my file system with BrowserFS which allowed me to setup IndexedDb as the main writeable location. When in Firefox Private mode it switches to an in memory file system which does not persist. Using BrowserFS also meant I could open ZIP and ISO files as if they were folders. I create a JSON file on build that has the initial public folder directory structure which is used as the readable portion of the file system via plain HTTP GET requests. I've also added the ability to extract RAR files, although I don't currently have it linked to File Explorer to see it's contents before extracting. I can also make and extract ZIP/ISO via fflate.

Thanks for the interest! To do git I used https://isomorphic-git.org/, the terminal is backed by https://xtermjs.org/ and the file system that it writes to is coming from https://github.com/jvilk/BrowserFS. This is all part of my side project (https://github.com/DustinBrett/daedalOS) to build a web desktop environment.

- https://github.com/jvilk/BrowserFS

Thanks, I'm glad to hear you liked it! I am using BrowserFS to create writeable data on IndexedDb.

File System

File System via HTTP & IndexedDb (BrowserFS)

Generate an index with this script, save it inside the folder you want to serve https://github.com/jvilk/BrowserFS/blob/master/tools/XHRIndexer.coffee

BrowserFS git repo, BrowserFS NPM package i'm using.

File system with drag & drop support (BrowserFS)

Thanks! It's built with React (Next.js) and Mantine for the UI components. I'm not sure what you mean with edit systems, but the layers are using react-draggable. The syntax highlighting is powered by shiki and a bunch of exported VS Code themes. The state is handled by zustand, with the undo-redo functionality built on top of it. The code formatting is done with prettier and the image export uses html-to-image.

DOM with html-to-image for screenshot

So I am currently developing a React application using html-to-image to accomplish what I want. Basically, I have created an application that allows the user to input the URL to a Tweet, and then I generate a customizable React component that can ultimately be downloaded as a PNG or SVG. The application looks like this: https://i.imgur.com/qP4zDDO.png

There are ways of turning a DOM element in to a JPG or PNG. Like the html-to-image package. But I have no idea how you'd let the user share it to Twitter.

Peek hover preview of windows

In my image editor project I use html-to-image. It's a fork of dom-to-image and it has a few extra options. It has canvasWidth and canvasHeight for scaling the output but I'm not sure how they work because I used another setting called pixelRatio, since in my image editor I have an option to save the image to whatever the editor zoom is set to, so I already had the proper scale value and never ended up trying the other to settings.

bubkoo/html-to-image – Generates an image from a DOM node using HTML5 canvas and SVG.