DEV Community

Fast4word
Fast4word

Posted on

GlintCode: A Beginner-Friendly Language That Runs in the Browser

Introducing GlintCode ✨

I've been building GlintCode, a lightweight scripting language for the browser that runs on top of JavaScript.

The goal is simple: make building browser apps easier with a clean, beginner-friendly API while still using the power of JavaScript under the hood.

Features

  • 🚀 Runs directly in the browser
  • 📝 Uses <script type="glint">
  • 🌐 Built-in DOM helpers
  • 🎨 Simple UI creation functions
  • 🔁 Built-in loop helpers
  • 📦 Optional module system
  • ⚡ No build tools or compilation required

Hello, World

<script src="https://fast4word.github.io/glintcode/glint.js"></script>

<script type="glint">
page("Hello")

heading("Welcome to GlintCode", 1)
paragraph("Your first Glint app!")

button("Click Me", () => {
    print("Hello from Glint!")
})
</script>
Enter fullscreen mode Exit fullscreen mode

Why GlintCode?

JavaScript is incredibly powerful, but for beginners or small browser projects it can sometimes feel more verbose than necessary. GlintCode provides a set of simple, readable functions that make creating interfaces and interacting with the page easier, while still letting you use JavaScript features whenever you need them.

Because GlintCode runs on top of JavaScript, you can gradually learn the underlying language without giving up access to the browser's APIs.

What's next?

I'm continuing to expand GlintCode with new functions, modules, examples, and documentation. Future plans include additional built-in libraries, a richer module ecosystem, and more developer tools.

I'd love to hear your feedback, suggestions, or ideas for features you'd like to see!

GitHub: https://github.com/Fast4word/glintcode

Top comments (10)

Collapse
 
nazar-boyko profile image
Nazar Boyko

The fact that you can drop in one script tag and get something on screen with no build step is what makes this fun to try, you're basically playing before you'd even have a project set up. One thing that might bite early adopters, the glint.js link points at whatever's newest on GitHub Pages, so the day the API changes, every page using that URL changes with it. Shipping versioned files like glint-0.1.js would let people pin to something that won't move under them. Also curious what the module system ends up looking like, that's usually where these small languages get interesting.

Collapse
 
fast4word profile image
Fast4word

Don't worry, the API endpoint will stay the same! But on my next release I will add those versioned files, thank you for your interest and recommendations!

Collapse
 
hosseinyazdi profile image
Hossein Yazdi • Edited

Nice project! I like the idea of lowering the barrier for beginners while still keeping JavaScript underneath. It makes the learning curve much less intimidating.

There are also quite a few beginner-friendly JavaScript tools here that people might find useful: 40+ Best Javascript Tools.

Collapse
 
wrencalloway profile image
Info Comment hidden by post author - thread only accessible via permalink
Wren Calloway

The tension in your Hello World is that () => {} inside <script type="glint"> isn't Glint — it's raw JavaScript. So your parser has two choices, and both bite. Either you actually parse the language and have to reimplement arrow functions, closures, and scope (huge), or you eval/new Function the body and you're just JavaScript with helper functions bolted on, in which case "a language" is overselling what's really a DOM helper library.

That second path is the honest and probably better one — but it changes your beginner story. The moment a learner mistypes something, the error is a raw JS stack trace pointing into a new Function blob with line numbers that don't match their source. For a beginner-first tool, that error-mapping problem is the whole ballgame, and it's the part that's genuinely hard, not the heading() and button() sugar. I'd figure out which of those two designs you're actually building before adding more built-in libraries, because it determines everything downstream.

Collapse
 
leob profile image
leob

Clever idea! It's just a small set of utility JS functions masquerading as a programming language, right? It does give off the impression of a (highlighy accessible) 'programming language' ...

Collapse
 
fast4word profile image
Fast4word

You could say that, but it will be expanded into a full 'language' in time!

Collapse
 
leob profile image
leob • Edited

I can't wait, do keep us updated!

Thread Thread
 
fast4word profile image
Fast4word

Can do!

Collapse
 
hari_haran_144973263df174 profile image
Info Comment hidden by post author - thread only accessible via permalink
Hari Haran

is this help for our work

Collapse
 
fast4word profile image
Fast4word

What work?

Some comments have been hidden by the post's author - find out more