SamJS

SamJS is an Open Source in-real-time JavaScript runner for testing and prototyping your JS code.

📚 Table of contents

• SamJS
  • Functionalities:
  • Import modules
  • Use fetch
  • Use the console methods -> log, info, warning, error
  • Change the theme
    • Dark mode
    • Light mode
  • Search packages
  • Share your code
  • Account
    • Creating an account
  • Managing your account
  • Save code snippets

Functionalities:

• Instant run the code when it's modificated
• Async functions like fetch or your custom ones
• Import libraries using the require method
• Code autocomplanation while you type
• Package searching with access to all npm
• Share your code by a url
• Save code snippets if you log in

Import modules

You can import modules in your program by using the async method require:

require(<url>) -> Promise(<library>)

An example importing random-words:

const rw = await require('https://esm.sh/random-words@1.1.2')
console.log(rw['wordList'])

Open in SamJS 🔌

Note

You can only import libraries wich use ECMAScript modules

Use fetch

You can also use the method fetch in SamJS, for using it correctly, follow this structure:

fetch(<url>)
    .then(res => <action>)

Otherwise, you will get an empty object ({}) as the response.

An example calling the pokeapi:

fetch('https://pokeapi.co/api/v2/pokemon/ditto')
   .then(res => res.json())
   .then(response => console.log(response.name)) // Prints 'ditto'

Open in SamJS 🔌

Use the console methods -> log, info, warning, error

SamJS supports four different print methods:

console.log('This is a log')
console.info('This is some info')
console.warning('This is a warning')
console.error('This is an error')

Open in SamJS 🔌

The example in the app:

Change the theme

You can switch between dark and light modes by pressing the theme button:

Dark mode

Light mode

Search packages

By using the method require you can import packages very easily. And you can look for them easily as well!

Just press the package searching button and a dialog will be displayed:

Share your code

Do you want to show your code to your friends or team? Just copy the shareable url and send it to them.

Account

SamJS has a completely free account system that allows you to save your code in snippets. It uses Clerk for the authentication and Supabase for the code storage.

Creating an account

For creating an account press the Log In button:

You will be redirected to a Log In page. Press the # link:

When clicked, choose one of the three account options:

• Github
• Google
• Email (you will have to confirm the email adress)

Managing your account

Press the account button (your account avatar) and then Manage account:

When pressed, you will see a dialog where you can change your account settings:

Save code snippets

Note

You must be logged in in order yo use this function, otherwise the access button will be disabled. Also keep in mind that there is a limit of four snippets per account for ensuring everybody to have free space for their snippets.

Press the code snippets button and then Save current code for saving the code of the editor as a snippet.

When it is uploaded a section will appear with the first line of the saved code:

If you hover the section element two buttons will appear:

• Add to the current code: for adding the content of the snippet to the editor.
• Remove snippet: for removing the snippet from the list.

Also, if you click the section the code of the editor will be replaced by the content of the snippet.

Tip

For adding a title to the snippet add a comment at the beginning of your code with it