GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com β€” GitHub - ExplainDev/tutorial-maker: Create code tutorials with the help of AI

This repository was archived by the owner on Mar 21, 2025. It is now read-only.
BranchesTags
Open more actions menu

Latest commit

 

History

5 Commits
5 Commits

Folders and files

NameName
Last commit message
Last commit date
examples
examples
 
 
public
public
 
 
src
src
 
 
.gitignore
.gitignore
 
 
CODE-OF-CONDUCT.md
CODE-OF-CONDUCT.md
 
 
CONTRIBUTING.md
CONTRIBUTING.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
babel-plugin-macros.config.js
babel-plugin-macros.config.js
 
 
babel.config.js
babel.config.js
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
postcss.config.js
postcss.config.js
 
 
tailwind.config.js
tailwind.config.js
 
 
tsconfig.json
tsconfig.json
 
 

Repository files navigation

ExplainDev Tutorial Maker

Instead of wasting time thinking of a better name, we use it to make this awesome little project opensource.

Tutorial Maker helps you create those beautiful images of code people share on the Internet, explained using AI.

Demo

Try it: Live demo

Demo video: watch on YouTube.

Examples

Most text in the images below was written by AI.

Tutorial JavaScript

Tutorial JavaScript

Tutorial grep

Tutorial grep

Tutorial HTML Links

Tutorial HTML

Tutorial Docker containers

Tutorial Docker

Features

πŸ’₯ Add code blocks and text elements

πŸ€– Explain code with AI

πŸ–ΌοΈ Download tutorial as an png image

↔️ Resize, position and change color of elements

🌈 Custom background using plain CSS directives

πŸͺ„ Code Syntax Highlighting

Development

This project was bootstrapped with Create React App.

In the project directory, you can run:

npm install

Installs project dependencies that are needed to run the project locally. You need to do this when you first clone the project or the npm commands below will not work.

npm start

Runs the app in the development mode.

Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Contributing

Please, read our contributing guidelines and code of conduct.

To-do list

Decouple explanation boxes from ExplainDev service

Goal: Users should be able to highlight explain code without the help of AI.

AI explanations are awesome, but sometimes expensive, innacurate or simply unnecessary. We know some users would love to add explanations themselves. We believe that this feature should be optional.

Testing

Goal: Develop a robust testing framework that prevents introducing breaking changes.

Tests weren't a priority in the MVP phase but we aspire to grow Tutorial Maker into a mature project. Ideas for testing the webapp are welcome.

Store tutorials

Goal: Save tutorials so that you can recover them later.

Store tutorials in any storage. In order to make it happen, we'd need to serialize the state of the canvas and its elements, for example, the content of code blocks, position, colors, etc.

Decouple login from ExplainDev service

Goal: Use any authentication provider

Plug-in any LLM

Goal: As more LLMs rise and become available, users should be able to select the model that best fit their needs.

Docs

Goal: make it easier for new folks to start contributing to this project

Learn more

We’re welcoming everyone in our community to contribute to the tutorial maker and would love your input in whatever capacity you thrive in. I’ll be building out the contribution guidelines in the days to come in order to make it easier to get started. We welcome discussion on Discord!

  • Discord Community
  • Twitter
  • YouTube

About

Create code tutorials with the help of AI

app.explain.dev/

Topics

aicodeeducational-softwarescreenshotsnippettutorials

Resources

Readme
MIT license

Code of conduct

Code of conduct

Contributing

Contributing
Activity
Custom properties

Stars

53 stars

Watchers

1 watching

Forks

7 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

You are visitor 01402503 β€” GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800Γ—600. No cookies required.