{"id":13748961,"url":"https://github.com/ghaiklor/kittik","last_synced_at":"2025-04-09T15:02:29.687Z","repository":{"id":57147640,"uuid":"45898258","full_name":"ghaiklor/kittik","owner":"ghaiklor","description":"Create slides in TypeScript and present them in the terminal using ASCII only!","archived":false,"fork":false,"pushed_at":"2021-06-04T16:49:45.000Z","size":1592,"stargazers_count":180,"open_issues_count":2,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-09T15:00:57.379Z","etag":null,"topics":["ascii","ascii-characters","deck","engine","keynote","kittik","presentation","sdk","slide","slides","terminal"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ghaiklor.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null}},"created_at":"2015-11-10T08:28:57.000Z","updated_at":"2025-01-03T00:06:48.000Z","dependencies_parsed_at":"2022-09-05T16:50:25.411Z","dependency_job_id":null,"html_url":"https://github.com/ghaiklor/kittik","commit_stats":null,"previous_names":["kittikjs/kittik"],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghaiklor%2Fkittik","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghaiklor%2Fkittik/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghaiklor%2Fkittik/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghaiklor%2Fkittik/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ghaiklor","download_url":"https://codeload.github.com/ghaiklor/kittik/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248055282,"owners_count":21040156,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ascii","ascii-characters","deck","engine","keynote","kittik","presentation","sdk","slide","slides","terminal"],"created_at":"2024-08-03T07:00:53.274Z","updated_at":"2025-04-09T15:02:29.654Z","avatar_url":"https://github.com/ghaiklor.png","language":"TypeScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# kittik\n\n![Travis (.com) branch](https://img.shields.io/travis/com/ghaiklor/kittik/master?style=flat-square)\n![Code Coverage](https://img.shields.io/codecov/c/github/ghaiklor/kittik?style=flat-square)\n![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/ghaiklor/kittik?style=flat-square)\n![GitHub last commit](https://img.shields.io/github/last-commit/ghaiklor/kittik?style=flat-square)\n\n[![GitHub followers](https://img.shields.io/github/followers/ghaiklor?label=Follow\u0026style=social)](https://github.com/ghaiklor)\n[![Twitter Follow](https://img.shields.io/twitter/follow/ghaiklor?label=Follow\u0026style=social)](https://twitter.com/ghaiklor)\n\nDo you have a conference soon?\nAre you tired of presenting slides in Keynote, PowerPoint or any HTML based tool?\nWhy not to create and present slides in the terminal using ASCII only!\n\n_NOTE: I’m not arguing that kittik is better than X tool designed for presentations. I’m saying that we can use it for fun in small topics or conferences._\n\n## Why\n\nI was always in love with the terminal and what we can do with it, and still is, actually.\nSomeday, I thought, why not to be a little creative and present speech on the conference in the terminal by using ASCII characters only?\nI tried and turned out that it is a hard task.\nThat is why, I decided, we need a tooling for it!\n\nThat is how a name was born, _Keynote In the Terminal_ (KIT) and a palindrome for KIT - KITTIK.\n\n## Features\n\n- Unique shapes rendered via ASCII characters only, e.g. rectangle, ASCII art (_aka figlet_), code with syntax highlighting and more.\n- Customize how shapes must look like in the terminal, their background and foreground color, positioning in the terminal, width and height.\n- Animate every shape you want. YES! Kittik supports animations and still uses ASCII only. Create a rectangle and slide it in from the left side or make a text printing on the screen.\n- Everything in kittik comes with a builder. No more typing JSON, YAML or objects and guessing keys.\n- Developer Experience is a key feature. Everything in kittik is typed, even your custom names will be typed and suggested to you through autocompletion.\n- Presenter mode. Run your slides and manage them with a keyboard (_N - next slide, P - previous slide, Q - quit_).\n\n## Demo\n\n| How to convert an RGB to HEX |\n| ---------------------------- |\n| ![demo.ts][demo.ts]          |\n\n## Getting Started\n\nAll you need is a single dependency - `kittik`.\n\n```shell\nnpm install kittik\n```\n\nThe package provides everything you need to create your own slides - builders.\nThere are builders for shapes, animations, slides and deck.\nStart with a builder for Deck.\n\n```typescript\nimport { DeckBuilder } from \"kittik\";\n\nDeckBuilder\n  .start()\n  .end()\n  .render();\n```\n\nEvery builder has a `start()` and `end()` methods.\nSo it is easier to write them down at first place before configuring, that way you will not forget about `end()`.\nAlthough, type check does not allow this situation.\n\nEvery deck comprises your slides.\nTo add more slides, just call `withSlide()` method.\nIt accepts a function where the slide builder will be passed by the deck.\n\n_NOTE: the builder is already started in `withSlide()`, so you need to end it only._\n\n```typescript\nimport { DeckBuilder } from \"kittik\";\n\nDeckBuilder\n  .start()\n  .withSlide((slide) =\u003e slide.end())\n  .end()\n  .render();\n```\n\nNow, slide builder provides two essential methods `withAnimation()` and `withShape()`.\n`withAnimation()` accepts a name for your animation (_for further references_) and the animation that must be built through animation builder.\nThe same applies to `withShape()`.\nIt accepts a name, and a shape built with shape builder.\n\nThat way you can specify animations and shapes for your slide.\nBut kittik does not know in what order to render those shapes and what animations animate what shape.\nTo handle this situation there is `withOrder()` method.\nIt accepts a name of the shape you defined before and an array of animation names you want to use.\n\n```typescript\nimport { DeckBuilder, ShapeBuilder } from \"kittik\";\n\nDeckBuilder\n  .start()\n  .withSlide((slide) =\u003e\n    slide\n      .withShape(\n        \"Hello, World!\",\n        ShapeBuilder.start(\"Text\").withText(\"Hello, World!\").end()\n      )\n      .withOrder(\"Hello, World!\")\n      .end()\n  )\n  .end()\n  .render();\n```\n\nCongratulations, you just created a simple Deck with one slide and “Hello, World” in it.\nAdd more slides, animate them and bring them to live.\n\n## More Examples\n\nYou can find more examples in [`examples`](./examples) folder.\n\n## FAQ\n\n- It is too hard to create a presentation even with builders and auto-completion\n\nTrue, if you want to create a lot of slides, it will be not an exceptional experience in declaring them through builders.\nThat is why there is work in progress (_only in my mind_) for the concept of themes and parsers for different input, e.g. Markdown.\n\n- Have questions?\n\nAsk them in [issues](https://github.com/ghaiklor/kittik/issues), I’ll be glad to answer them.\n\n## License\n\n[MIT](./LICENSE)\n\n[demo.ts]: https://user-images.githubusercontent.com/3625244/84595639-aca86800-ae61-11ea-93e3-4dd6ed7e9588.gif\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghaiklor%2Fkittik","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fghaiklor%2Fkittik","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghaiklor%2Fkittik/lists"}