![](\"images/tryitjs-overview.png\")
\n\n__Note__ _You can save your edits (in the browser's local storage) so you can come back to it at a later date._\n\n## Development status\n\nThe code is in good shape and is ready for developers to use. The documentation is still work in progress, but this site as some good example for you to use. As always, time allowing, I would like to add more capabilities in the future.\n\n### Links to demos\n\n\n* TryITjs Tutorial\n* Overview of TryitJS
\n* \n\tTutorial for DataFrame\n> A more extensive example on how to create a Tutorial, examples of how to use DataFrame library used for data analysis and data visualization (see: GitHub data-frame repo). The data used for the examples is the worldwide covid dataset consisting of over 105K rows). THe data-frame package was developed by me for some of my personal use and professional project. \n
\n\n\n### Why TryTTjs\n\nAs with most github project, it was to meet a need I had, namely to delevop an interactive tutorial for a JS library I had developed - DataTable loosly base of Python's Pandas library. \n[DataFrame](https://github.com/nurulc/data-frame). The tool is powerful, but it is not easy for others to know how to use it and what you can do with it. The tutorial is written as a text file(s) in an exxtended __markdown__ similar to this document. Interspesed with the markdown ther is runnable javascript code. That can be executed and edited to get hands on experiece with the ideas and api.\n\nAny number of utilities and libraries can be included with the tutorial. Besides markdown, sections can how the full power of HTML as well as Javascript. I have found it easier to write a tutorial if ther is a step by step guide working through a real problem. TryITjs creates an standalone HTML page with no backend server required (except to deliver the page).\n\n> Documentation - _Work in progrress_ :construction:\n> \n\n
![](\"under-construction-small.png\")
\n\n![](\"images/basic.png\"width=\"600\"/)
\n\n## User Interface\n\n\n\nAbove is a is an a snippent of HTML file generate by **TryItJs**\n\n## Instalation\n\n### Install globally \n```sh\nnpm install -g tryitjs\n```\n### Quickly try it out\n\n* Start a command prompt (bash on Linux, cmd on Windows,...)\n* Navigate to an empty directory (or you outer level projects directory)\n```sh\ntryitjs --init my-try-playpen\n```\nYou will see that a new directory has been created __my-try-playpen__\n\nSwitch to the the playpen directory as follows:\n```sh\ncd my-try-playpen\nnpm install\nnpm run build\nnpm start\n```\n\n### Simplest usage\n\n\n#### Example of HTML generated\n\nThe following command can be used to generate a __.HTML__ file from a __.try__ file \n```bash\n > tryitjs basic.try\n```\nSample .try file\n\nThe command above generates and \nbasic.html (click to see live results)\n\n\n
![](\"images/basic.png\")
\n\n\n> ![](\"https://image.flaticon.com/icons/png/512/107/107788.png\"){kind=icon}
Idea for the future - pure HTML file that lets you edit an preview simple _.try_ files. TryIJjs should be able to do it, the API can run in a browser (by design) but I have not tried that usecase, so I am not sure it will work out of the box.\n\n\n\n### What is a .try file\n\nVery it is a markdown file with a few simple extensions, .try file have the following few commands:\n\n### Multi-line markup\n| command \t| Sescription\t|\n|---\t|---\t|\n|**!head** \t| Items to be added to the _<head>_ add all subsequent lines become part of html/head\tuntil the next command|\n|**!md** \t| Subsequent lines are treated as markdown\t|\n|**!tryit** | the subsequent lines are editable and executable javascript\t|\n|**!html** | the subsequent lines are plain html fragments\t|\n\n```\n!head\n \n \n!md -- end the !head and starts markdown segment\n# This is a title\n\n...\n\n!tryit -- start some javascript \n let arr = [1, 2, 3]; \n x\n```\n### Single line markup\n\nDoes not end the previously started command section, in these single-line command can be a part oone of the previous command\n\n| command \t| Description\t|\n|---\t|---\t|\n| @@include <file name> | copy the contents of the file into the current location |\n| @@include ESCAPE <file name> | display the contents of the file |\n| @@once | If this annotaion is present in a file to be included, The file is included once. Any subsequent @@include of the same file will be ignored. Note: _This must be the first file of a file to be included_ |\n| **!--** | the rest of the line is a comment \t|\n\n### Run from command prompt\n\n* locally installed\n> node_modules/.bin/tryitjs