Script Writer v1.0.1 stable release

In-Browser Jupyter Notebook Alternative for Javascript | by @rajatsandeepsen

Tech Stack & Tools used to build this project

• Build with Nextjs, React, Bootstrap and Prisma
• Deployed on Vercel & Planetscale MySQL DB
• Authentication using Github OAuth & Next-Auth
• Javascript, Sass, SQL
• uiw/Codemirror, useSWR hooks etc.

Features

• In-Browser Javascript Notebook
• Save and Load Notebooks
• Share Notebooks
• Export/Print Notebooks as PDF
• Login using Github
• VS code similar UI & Keyboard Shortcuts
• Code Autocomplete (Emmet), Syntax Highlighting & Bracket pairing
• Visibility of Notebook (Public/Private)
• Code Execution & Code Output
• JSON state management section
• Code & Markdown support
• ChatGPT integration for code suggestions (Coming Soon)
• Build Websites using HTML, CSS & JS (Bug Fixing)
• Build single file/page React Apps (Coming Soon)

Additional Function for state control

• set( ) - set a variable in JSON state file
• get( ) - get a variable from JSON state file
• setFunc( ) - set a function in JSON state file
• getFunc( ) - get a function from JSON state file
• importPackage( ) - async function to import CDN packages
• input( ) - async function to take input from user
• sleep( ) - async function to sleep the main thread

console functions

• console.log( ) - log to console
• console.clear( ) - clear console
• console.error( ) - log error to console
• console.assert( ) - log assertion to console
• console.add( ) - append HTML elements to console
• others are coming soon

Unavailable functions & methods

• import
• export
• require

Examples

• add data to JSON & access them in next block

let url = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
set('url', url)

let { url } = get() // reading from JSON
let HTML = `<img src=${url} alt='img loading?' width='100%'>`
console.add(HTML)

• import CDN packages

let url = 'https://unpkg.com/[email protected]/dist/browser.js'

importPackage(url, () => {
  
  const network = new brain.NeuralNetwork();

  network.train([
    {input:[0,0], output:{zero:1}},
    {input:[0,1], output:{one:1}},
    {input:[1,0], output:{one:1}},
    {input:[1,1], output:{zero:1}},
  ]);

  // What is the expected output of [1,0]?
  let result = network.run([1,0]);
  for (let [key, value] of Object.entries(result)) {
    console.log(`${key}: ${value}`)
  }

})

• store functions & use it on next cell

function findSum(a, b){ return a + b }

setFunc("findSum", findSum)

let findSum = getFunc("findSum")

let result = findSum(10, 13)
console.log(result)

• sleep the main thread

async function someFunc(){
  await sleep(1000)
  console.log("After thread sleeping")
}

someFunc()