chinchang / web-maker

A blazing fast & offline frontend playground

Web-Maker 🕸🛠

---

Web-Maker is an offline playground for your web experiments. Something like CodePen or JSFiddle, but much more faster and works offline because it runs completely on your system.

Open Web App (Recommended: More features. More fun!)

or

Install Chrome extension

Features

• Supports Preprocessors: HTML (Pug & Markdown), CSS (SCSS, LESS & Stylus, Atomic CSS) & JavaScript (ES6, TypeScript & CoffeeScript)
• Works offline
• Quick creation & good-old files mode
• Inbuilt Console
• Save and load your creations
• Auto-save feature
• Code auto-completion
• Easy addition of popular JS & CSS libraries
• Import & Export all creations anytime, anywhere
• Multiple editor themes & other configurable settings
• Font options + use any system font!
• Very easily accessible. Simply open a new tab in Chrome! (in chrome extension only)
• Multiple layouts to choose from
• Capture preview screenshot (in Chrome extension only)
• Save as HTML file
• Edit in CodePen

Follow @webmakerApp for updates or tweet out feature requests and suggestions.

Support Web Maker

Hi! I am Kushagra Gour. Web Maker is a free and open-source project. To keep myself motivated for working on such open-source and free side projects, I have launched a Patreon campaign. Your pledge, no matter how small, will act as an appreciation towards my work and keep me going forward making Web Maker more awesome🔥.

Support with $ETH - 0x39989c0E53cfdcF6792e09d7573c65E911e774bA

If not that, you can support by simply sharing about how much you love 💖 @webmakerapp.

Sponsors

Web Maker stays stable as rock with every release, thanks to the sponsored testing on the awesome

Deployed on the superfast Netlify platform.

License

MIT Licensed

Copyright (c) 2016-2022 Kushagra Gour, webmaker.app

web-maker's Issues

React support via Babel

Now it occurs this error:

It appears like your babel version doesn't recognize JSX

Log:

> Uncaught TypeError: Cannot read property 'type' of undefined
    at a3 (escodegen.browser.min.js:1)
    at at (escodegen.browser.min.js:1)
    at Object.al [as generate] (escodegen.browser.min.js:1)
    at computeJs (script.js:516)
    at Object.scope.setPreviewContent (script.js:605)
    at script.js:657
a3 @ escodegen.browser.min.js:1
at @ escodegen.browser.min.js:1
al @ escodegen.browser.min.js:1
computeJs @ script.js:516
scope.setPreviewContent @ script.js:605
(anonymous) @ script.js:657

JSXTransformer.js:12705 
> You are using the in-browser JSX transformer. Be sure to precompile your JSX for production - http://facebook.github.io/react/docs/tooling-integration.html#jsx

full screen preview

Option to see the preview in full screen without any code of other UI on the screen.

This could be a keyboard shortcut plus a button on the screen.

Add a javascript console panel (JSbin like)

features required:

• show console.* call outputs. Eg. console.log, console.info etc.
• show error from preview frame
• evaluate expressions inside the preview frame context
• clear console option
• collapse console option

Save experiments for later editing

Ability to save experients in localstorage or synced storage so that you can create multiple experiements and edit any of them in future.

keyboard support while selecting creation in saved library list

Should be able to use arrow keys to navigate and ENTER to open an item in library

prevent infinite loop in JavaScript

The extension crashes when theres an infinite loop in the code. This needs to be detected through static analysis and prevented from running.

Add stylus support

Browser freezing and laptop overheating while typing infinite loops still not fixed

In the middle of typing a for or while loops in JavaScript, the browser froze and nearly set my computer on fire. Please focus more on fixing this. Thanks!

Editor keeps reverting back to the default arrangement

I like having the view down the bottom so I have plenty of vertical space for HTML/CSS/JS. Why must it revert to the default view every time I open a new tab? It forces me to keep re-adjusting it.

Vuejs

Vuejs is not working in Chrome Canery. :)

key shortcut to switch between html/css/js pane

Something like shift + tab to cycle/switch between panes

Syntax highlighting not working on preprocessors

Eg. If you switch to markdown, syntax highlighting doesn't work according to changed mode.

fix indentation after enter is pressed

Sometimes indentation is wrong after ENTER is pressed on a line:

Add a color picker

Option to pick a color from a color picker and even from the page itself would be nice.

Add search to saved items list

Add SASS support

Right now only SCSS is supported, not SASS.

Please add holder.js to the tool to use dummy images while working offline

http://holderjs.com/

Library name autocompletion when typing in Add library input field

results can be fetched from https://api.cdnjs.com/libraries?search=hint

Give option to not replace new tab

People might be using momentum/panda type apps. They won't like to override the new tab and open it on demand instead.

Add CSS preprocessor support

2 most used ones are: SASS and LESS.

Drag n open open for any web page

Ability to open any web page by simply drag-dropping it over web maker. How cool would be that!

UX issue opening saved files you must click in a very specific place on the button

click open
saved files as buttons show up
you cannot click on text to open the file...
you must click on the blank area in the lower right of the button to open the file

desired behavior:
user can click anywhere in the button to open the saved file

here's the video
https://youtu.be/--3kuSYumMc

Add option to collapse/uncollapse any pane

Change the key short for ctrl+s

When I press the ctrl-s, I usually means save the html which I'm working on.But file saved that is the web Maker's html.

I think it could prevent the key short and the save the file that woking on

 if ((event.ctrlKey)&&(event.keyCode==83))   
     event.returnValue=false;

Add code linter

So that user clearly sees the errors in the code, if any.

Cannot load local resources

Loading of local resources gives an error right now.

Include externl css or js.

I can't include my bootstrap or Jquery files for testing. Can it be solved?

Option to search and replace text from specific tabs

It would be great if an option is added to find and replace text from a particular tab. It is a feature that web developers use frequently.
Thanks 😉 👍

new item file name uses wrong date

I create a new item
file name shows
Untitled 29-0-12:53
but today is 29 JAN || 29-1 but !29-0

desired behavior:
user has choice of date formats e.g.

• 29JAN2017 untitled (MY preference)
• JAN292017untitled
• etc.

here's the video
https://youtu.be/Ak4ykX1rdP8

thank you
Dennis

Import/Export feature

User should be able to export all his creations (into some jSON etc) and import them anytime later.

Typescript support

http://codepen.io/chriscoyier/pen/XbjXXW

Usage in Google Chome Canary fails to resolve and throws console log messages. Content Security Policy.

Thanks for you plugin. Like it!

Google Chrome works fine for me. Chrome Canary seems to have a tighter content security policy I assume.

Here is an example to reproduce using Vue.JS.

Tried this via "Add library" and via HTML native fashion as per screen print.

Browser : Chrome Canary v57.0.2981.

HTML

<div id="app">
  {{ message }}
</div>

JS

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

as per example here.

get back content in last closed tab

Feature suggestion for Web Maker: save code when tab is closed and re-open with ctrl+shift+t

By @ValentinHervieu

Accessibility for screen reader users

The contents of the input boxes of the editor can not be reviewed or navigated by screen reader users. They report themselves as blank.
Web-Maker looks like it could be a really great and useful tool if only it could be made more accessible and inclusive so everyone that wished to use it could do so.

Fix CSP error in chrome canary

Seems like from chrome 57, extension's CSP applies on the iframe open in the extension too. It does not apply before that version.

Issues:

• Inline scripts wont work which was used to run user's js
• remote scripts can't be fetched (required to load external libs)

Setting: Enable/disable auto preview

USer should be able to control if the preview should refresh automatically while typing or not.

Add collab mode

If multiple can together code in one virtual canvas using their own browsers, that would be super awesome!

incremental CSS update in preview

Right now the preview completely refreshes even on a small change in CSS. CSS changes can be simply applied/unapplied with removal of STYLE tags instead of refreshing the already rendered page.

It will be much faster.

v2.2.1 export html does NOT include js

v.2.2.1
step to reproduce:
export

1. html
2. open html in browser or on local server
3. html file does not contain js it contains a link to a temp file in chrome ergo js does not work

desired behavior
js is included in the html OR
js and other assets are exported into folder
with index.html
e.g.
dir: index.html
dir dir file.js
dir dir photo.jpg
dir dir 2photo.jpg

video
https://youtu.be/Be_5dcqO_NI

on local machine

on codepen

Setting: Possibility to set indent in editor fields

Possibility to set code indent to 2 or 4 spaces / tab

Include js / css libraries

Possibility to include popular CSS / JS libraries (jQuery, Bootstrap etc), by select it from list

auto completion prompt won't go away

plugin v2.
https://youtu.be/wk9aX8q2-Rc

the auto prompt just won't go away... and doesn't always recognize the first letter as a possible start point for the new tag... sometimes

thank you
Dennis

add checks for storage overflow

Show approp msg when storage limit is reached

enhancement: search in the code of saved projects

##use case:
user wants to find code from previous project

1. open web maker
2. option: search in code

• options: whole word search
• options: save this search
• options: regex search

3. web maker displays search results

• option: show search results in new webmaker tab

Please do not replace the new tab - it's very annoying

I almost uninstalled it because of that.

Ability to take screenshot of the preview

Sometimes you quickly wanna grab a screenshot of your creation. Using an external screenshot service requires dragging over the area of the preview iframe manually. But with power of chrome extension, we can do this automatically!

Add autocompletion

Code autocompletion or suggestion.

adding p5js lib causes cursor to lock on center frame

latest webmaker
lastest chrome
Google Chrome 55.0.2883.87 (Official Build) m (64-bit)
Revision ad0be09aa3ca814168d079b52825f6f80e22f0e8-refs/branch-heads/2883@{#723}
OS Windows
JavaScript V8 5.5.372.32
win10

ctrl +f5 stops the unwanted behavior
here's the video
https://youtu.be/LGKf7K9Com4

Code Folding

The ability to fold blocks of code would be very useful:

Before:

After:

Beautify complete code

Would be awesome if complete code gets beautified with one click/key