NotNotePad - Live Demo
lets take the idea of programming
code (text)=> code interpreter/compiler=> machine code (binary data)
now when trying to improve this process we can encounter a few problems like
- any changes in the code syntax will require every user to update is interpreter and every program or library to update its code base, witch can result in mostly small or non-breaking changes every generation.
- sometimes code syntax witch is easy to write can be harder to interpret.
- for some people coding in general is not the best way to program especially for people in the creative area like designers.
that's why we have tools like:
- bable (code translator)
es6 + jsx=> raw js=> code interpreter
- wix (web builder)
visual editor=> html=> html renderer
- unreal engine blueprints
visual editor=> compiled data=> cpp interpreter
- google blockly
visual editor=> compiled code=> interpreter/compiler
those tools solve this problem by adding an additional layer to this proccess that act like some sort of code translators/generators
NotNotePad design to be a home for all kinds of code translators/generators as long as they can fit as a component in this model :
editor component=> editor data=> code=> interpreter/compiler
code example :
import "react"
import "code-editor"
class componenet-x extends code-editor{
reder(){
<input type="text" onChange={(text)=>{//input for json html
this.saveData(text); //save json as editor data
this.saveCode(compileJsonToHtml(text)) //compile json to html and save code
}} />
}
}
to start run:
yarn
yarn start
- or just visit our demo
- multi editor
- monaco editor (vs-code like) - [react monaco editor]((https://github.com/react-monaco-editor/react-monaco-editor)
- blockly html editor
- json tree editor - react-json-view
- ckeditor 4 and 5 html editor - ckeditor4-react , @ckeditor/ckeditor5-react
- codemiror - react-codemirror2, codemirror
- MD editor - react-mde
- full node like file system - BrowserFS
- static hosting with now - zeit
- live code/page view
- extensions system not finished
- extensions market place
- git panel
- js packages support