[GUIDE] Base64 Encode in Kodular Without Extensions (Using WebViewer + JavaScript)

Guides
,
1

Hello Koders! :waving_hand:

In this guide, I’ll show you how to encode text to Base64 in Kodular using WebViewer and JavaScript, without needing any external extension.

This method is fast, clean, and works offline.

:magnifying_glass_tilted_left: What is Base64?

Base64 is a method for converting text (or binary data) into a string format made up of only letters, numbers, +, /, and =. It’s commonly used in:

  • Encoding images for HTML
  • Sending data over APIs
  • Obfuscating strings (like API keys)

:brain: Why Use WebViewer?

Kodular does not have a built-in Base64 encoder. But we can use the WebViewer’s EvaluateJavaScript block to run JavaScript code and use the built-in btoa() function.

:hammer_and_wrench: How to Do It (Step by Step)

:white_check_mark: Step 1: Add Components

From the Palette, add the following to your screen:

  • WebViewer (Rename to WebViewer1)
    • Set Visible = false
    • Enable Allow JavaScript = true
  • Textbox (to enter text you want to encode)
  • Button (to trigger encoding)
  • Label (to show the Base64 result)

:white_check_mark: Step 2: Use Blocks

Now go to the Blocks section and add the following logic:

:yellow_square: When Button.Click
call WebViewer1.EvaluateJavaScript
  with text: "btoa('TextBox1.Text')"

This runs the JavaScript function btoa() to encode the input text. Also atob() to decode the input text

:green_square: When WebViewer1.AfterJSEvaluated
set Label1.Text to get value

This takes the result from JavaScript and shows it in the Label.

:light_bulb: Example

  • Input: Hello Kodular
  • Output (Base64): SGVsbG8gS29kdWxhcg==

:warning: Important Notes

  • btoa() works best with ASCII characters.
    • If you want to encode non-English or UTF-8 text (like नमस्ते, 你好), you’ll need an advanced Base64 encoder (possibly via extension or custom HTML page).
  • You can also use atob() to decode Base64 back to normal text using the same method.

:tada: That’s It!

You’ve now created a simple Base64 encoder in Kodular without any external extension. You can use this for encoding API keys, converting images, or even for fun.

If you found this helpful, leave a :heart: or reply below with suggestions and questions. Happy Koding! :rocket:

2 Likes
2

Hi SyntaxCore,

Change from .GotValue to .AfterJSEvaluated

Thank you for this tutorial <3

1 Like