Giter Site home page Giter Site logo

marketingpipeline / termino.js Goto Github PK

View Code? Open in Web Editor NEW
278.0 2.0 5.0 52 KB

Create a web based terminal on any website - great for games, animations and real world apps!

License: MIT License

JavaScript 100.00%
cli command-line ssh browser client-side command-line-app console console-application frontend javascript

termino.js's Introduction

Termino.js · GitHub license Current version PRs Welcome

User Showcase | Live Demo | Getting Started | Documentation | GitHub

Termino.js is a highly customizable front-end component written in pure JavaScript that is great for making web based terminal animations, games & apps on any website including support for curses-based apps, custom functions on user commands, key-code & mouse events & much more!

ie: You can use this JavaScript library to create web based terminals on any website.

Learn how to use Termino.js in your project.

Features

  • Fast: Termino.js is lightweight - being built in pure JavaScript
  • Self-contained: Requires zero dependencies to work.
  • Great for animations: You can make terminal animations with ease & bring your favourite typewriter library in or etc!
  • Customizable: Bring your own HTML, CSS & customize / create a terminal to your liking!
  • Inputs: Supports inputs for questions returned via a promised / await based value
  • Multiple instances: Create more than one custom terminal in a page!
  • HTML support: Add HTML elements such as links and more to your terminal!
  • Custom functions: Create your own custom functions with ease (including user-command functions, key-code functions & your own mouse event functions)
  • And much more: the options are endless!

Termino.js is not Emoji hand pointing left

  • Termino.js is not a executable application that you can download and use on your computer. It is a JavaScript library you use in the browser.
  • Termino.js is not a bash emulator etc. Termino.js can be connected to processes like bash or a SSH instance via API etc or any process that lets you interact with them by providing input & receiving output.

Documentation

You can find the Termino.js documentation here.

Check out the Getting Started for a quick overview.

You can improve it by sending pull requests to this repository.

Example and usage

You can view a demo of Termino.js in use here.

How to use Termino.js:

<!doctype html>
  <html>
    <head>
    <title>Termino.js Basic Example</title>
    </head>
    <body>
      <div id="terminal">
      <pre><code class="termino-console"></code></pre>
      <textarea class="termino-input" rows="1" wrap="hard"></textarea>
      </div>
      <script type="module">
        import {Termino} from 'https://cdn.jsdelivr.net/gh/MarketingPipeline/[email protected]/dist/termino.min.js';
        let term= Termino(document.getElementById("terminal"))
        term.echo("Hello world from https://github.com/MarketingPipeline")
      </script>
    </body>
  </html>

For more advanced usage such as adding your own commands, creating animations & etc. See the live examples here or you can find the Termino.js documentation here.

Contributing GitHub contributors

The main purpose of this repository is to continue evolving Termino.js, making it faster and easier to use. Development of Termino.js happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements.

Want to improve this? Create a pull request with detailed changes / improvements! If approved you will be added to the list of contributors of this awesome project!

Looking for a task to work on? Check the tasks that need improved in the to-do list.

See also the list of contributors who participate in this project.

License GitHub license

This project is licensed under the MIT License - see the LICENSE file for details.

termino.js's People

Contributors

marketingpip avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

termino.js's Issues

[Feature Request]: Add support for handling commands on submit

Currently to submit a Termino.js command you need to use the COMMAND key - which by default is "enter" or "13" is the key code.

You could trigger a command to sent to a Termino.js instance by creating a button - and on button - sending a keyboard event to the Termino.js input (focused) etc..

But it would be ideal to have it that an "submit" event listener was handled instead of just a key press.

This should be done - by making sure the key code on submit matches the set command key ELSE - do nothing.

As well button clicks for the input (with the same id as input text form) should be sent to a Termino instance by default.

Example how usage should look -

<input id="submit_msg" type="text" class="termino-input"></input>

<input type="button" id="submit_msg"></input>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.