Skip to content

amhsirak/js-diary

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

JS Diary

In browser live coding environment with markdown & JSX support for JavaScript 🎉

image

npm Package downloads

Install

npm i js-diary

Usage

npx js-diary serve

Run this command and navigate to https://localhost:4050

Now you have a live code editor running in your browser 🎉

Features

  • Live code execution
  • Auto code formatting
  • Write comprehensive documentation using markdown
  • Use NPM packages without installing them on your local machine
  • Run JSX in browser

Usecase

Useful for small code snippets and trying NPM packages

How To Use

  • On starting the application you will see two options - Code and Text.
  • The code in each code editor is all joined together in one file. For eg: If you define a variable in one cell you can refer it in any of the following cells.
  • You can show any string, number, etc. and even React components by calling the display function.
    • Note: display function is a function built in this environment. Call display multiple times to display multiple values.
  • You can delete cells or re-order them (move up or down) using buttons on the top right corner.
  • To add new cells, hover on the divider between each cell.
  • The code cells and text cells are resizable.

Example

2021-08-27.png

All of your changes get saved to a file you opened js-diary with. If you run npx js-diary serve notebook.js then all your code and text will be saved to a file named notebook.js

By default, the name of the file is notes.js

Currently the file gets saved in JSON format ( Working on saving it in JS Format in future release )

Issues

Raise an Issue if you find any bugs/got ideas.


Copyright 2021 Karishma Shukla