Skip to content
← Back to Community
HTML Code Editor & Playground | Hyperground | 100 Cycle Special | New Updates
Profile icon
ObiVibKenobi

Hyperplay

Hyperplay is an HTML playground.

How to use it

It's pretty simple: Type your HTML into the box, and the output shows up right next to your code

Upcoming updates:

  • JavaScript and CSS textareas
  • Save code
  • Upload code
  • Login system
  • Hosting

Let me know what you think by commenting on the post!

UPDATE LOG

1/15/2021 A.D.

Initial Release

1/15/2021 A.D.

Added theme choice dropdown

1/15/2021 A.D.

Set theme choice to localStorage

1/16/2021 A.D.

Bug fixes

1/16/2021 A.D.

Save code btn, set code to localStorage

Hyperplay

Hyperplay is an HTML playground.

How to use it

It's pretty simple: Type your HTML into the box, and the output shows up right next to your code

Upcoming updates:

  • Save code
  • Customizable theme
  • Save to localStorage
  • JavaScript and CSS textareas
  • Upload code
  • Login system
  • Hosting

Let me know what you think by commenting on the post!

UPDATE LOG

1/15/2021 A.D.

Initial Release

1/15/2021 A.D.

Added theme choice dropdown

1/15/2021 A.D.

Set theme choice to localStorage

1/16/2021 A.D.

Bug fixes

1/16/2021 A.D.

Save code btn, set code to localStorage

1/16/2021 A.D.

Default HTML template

Voters
Profile icon
AepSAEPULOH1
Profile icon
CosmicBear
Profile icon
maxina
Profile icon
elburg
Profile icon
SqueezyS
Profile icon
PYTHORE3605
Profile icon
KingsleyDockeri
Profile icon
zhaq6129
Profile icon
tipollae
Profile icon
zakdakidd
Comments
hotnewtop
Profile icon
amasad

This is great! You should use Auth and DB to store the user's content

Profile icon
ObiVibKenobi

Thanks! I’ll be working on that after I make an upload file button to upload code @amasad

Profile icon
JBloves27

Whoa.. @amasad

bows to ultimate CEO Welcome my lord!

Profile icon
FloCal35
Profile icon
JBloves27

Hahahha, yep, thats me! :D @FloCal35

Profile icon
Whippingdot

even I got amasad comment on my post. FLEX @JBYT27

Profile icon
Whippingdot

@amasad
image
wasn't 2020 just now over? Why the rush to 3030

Profile icon
JBloves27

Hahahahah @Whippingdot

Profile icon
zhaq6129
Profile icon
Codeverse

How did you make the line numbers. Can you plz teach me?

Profile icon
Breeze0505

@Codeverse The project is open source, just look at the code!

Profile icon
Codeverse

@JaceBillingsley So will @ObiVibKenobi, let me take some of the libraries he has mentioned and a few lines of code plz?

Profile icon
ObiVibKenobi

I didn’t make the libraries you are free to use them @Codeverse

Profile icon
Codeverse

Bro, I see a new "Repl.it" coming up. Thanks to you, I tried my hand at building a code editor. Mine can never compare to the two almight ones.

HTML Playground

and

Repl.it

Itsa fail (my site)

Profile icon
OldWizard209

Did u just use a bunch of source codes in here. What is this:

image
@moderation

This link: https://codemirror.net/addon/edit/matchbrackets.js

leads to this page:

image

mind the speechifyextension

I think this requires moderator attention. @moderation Sorry for that.

Also, I am sorry, if I was wrong....

Profile icon
CodingCactus
Profile icon
CodingCactus

@amasad can you make someone make it work thx

(pinging teams)
Profile icon
CoolCoderSJ

@CodingCactus
I think pinging moderation does work, as their description says -The official account for Repl.it Talk Mods. Ping @ moderation if you require moderator assistance.
@OldWizard209
i don’t get what the problem is....

Profile icon
CodingCactus

@CoolCoderSJ I am telling you that it doesn't and that description is incorrect, I am in that team and I have not received any notification.

Profile icon
CodingCactus

@CoolCoderSJ I've edited the description now

Profile icon
CoolCoderSJ
Profile icon
ObiVibKenobi

I used code mirror to make the themes. It is used by GitHub, Codepen, Bitbucket (I think), and a load of other sites. It’s like using Monaco editor or Ace @OldWizard209

Profile icon
amasad

@OldWizard209 What's the problem here? CodeMirror is the editor, so what they used an open-source package?

Profile icon
Baconman321

@amasad I think they are trying to say they hardly did any work themselves. Still, it's a great app!

@ObiVibKenobi how did you get it to execute scripts? (Oh, right, just write to an iframe and that works fine).

Profile icon
OldWizard209

Ok I am sorry, I thought it was using source code. I actually don't know how to interpret HTML. My bad. @amasad @ObiVibKenobi

Profile icon
BobTheTomatoPie

omg dude this is amazing

Profile icon
ObiVibKenobi
Profile icon
maxina

And how did you make the numbers on the side for the lines 0_0

Profile icon
maxina

I have a question for you: how do you make different colors for different text in the text area?

Profile icon
elburg

seems pretty cool.

Profile icon
Breeze0505

Make a reset button?

Profile icon
MarcusWeinberger

Hey, if you want a simple login system, then check out dupl auth - it's very easy to use, just include a script tag <script src='//auth.dupl.tech/auth.js' authed='console.log'></script> where authed is the function that will be called upon successful authentication, and will be passed a dictionary with user info.

Profile icon
ThatCoolCoder

Nice! Me and a friend made one of these a while ago but it was very buggy.

Profile icon
Breeze0505

Why did you put the updates at A.D. that's not really necessary...

Profile icon
ObiVibKenobi

:D In case someone thousands of years from now recovers this, they will know it is A.D. Also because if there is a life changing catastrophe they might switch to A.C. (After catastrophe) or something :D aka idk @JaceBillingsley

Profile icon
FloCal35

After Catastrophe

Ummmmmmmmm @ObiVibKenobi

Profile icon
Breeze0505

LOL

Profile icon
johnnyfrancis

Do you mind if i save this? This is something i need to remember. O:

Profile icon
LeoXu2

insane

Profile icon
ReyesP

THIS IS AWESOME.

Profile icon
Goush

Epic

Profile icon
Breeze0505

@ObiVibKenobi It saves even if you dont tell it to...

Profile icon
RahulChoubey1

How did you get your license?

Profile icon
ObiVibKenobi

Free license online @RahulChoubey1

Profile icon
RahulChoubey1

@ObiVibKenobi Noice. Do CC licenses work too? I love CC-BY-NC-SA but I'm not sure how to get one

Profile icon
Baconman321

@RahulChoubey1 Most licenses are released under CC.

It's also a good idea to get a copyright disclaimer from your school/employer to prevent them from saying that the code is "rightfully theirs" (GNU says this IDK why but eh. Probs because you are working for them.).

Profile icon
zplusfour

add emmit kthxbai

Profile icon
SixBeeps

Add in some templates.

Profile icon
ObiVibKenobi

Ok. Could you give me some examples? @SixBeeps

Profile icon
zplusfour

@ObiVibKenobi a html document:
like vscode ! + tab or repl.it ! + enter and then it generates a html document

Profile icon
SixBeeps

@ObiVibKenobi Yeah, or the default stuff when you make an HTML Repl

Profile icon
ObiVibKenobi
Profile icon
JBloves27

Wow! Nice job!

Profile icon
ObiVibKenobi

Thanks! I’m almost done making a button to save your html code, then I’m going to make a button to upload code into the box. @JBYT27

Profile icon
Breeze0505

@ObiVibKenobi maybe make it save as a file/folder for the group, so you can access many different saves?
just an idea :)

Profile icon
JBloves27
Profile icon
Breeze0505

This is awesome!

Profile icon
Breeze0505

Maybe add a help section, or share like repl.it
And support for multiple files in one project
Maybe even a public stylesheet publish section, so anyone can use it?

Profile icon
ObiVibKenobi

Ok I’ll start working on that stuff @JaceBillingsley

Profile icon
Breeze0505

:D I'd love to see support for other web based languages in here! If you need any help I'm not the best but just @ me!

Profile icon
Breeze0505

@ObiVibKenobi Maybe make it default to tabs, if possible, because backspacing 4 times is way more annoying

Profile icon
FloCal35

Bro that matrix dark mode...

Profile icon
ObiVibKenobi
Profile icon
TheCheeseCoder

great!

Profile icon
ObiVibKenobi
Profile icon
Whippingdot

BERRRRY NICE

Profile icon
ObiVibKenobi
Profile icon
Whippingdot

Belcome, but b bon't bike bhe BSS @ObiVibKenobi

Profile icon
tankerguy1917

nice. now all i need to do is learn more html to make full use of this.
i really like how its not just light and dark theme, but different types of dark and light themes. i really think more people should do that. i especially like the matrix dark theme.

Profile icon
ObiVibKenobi
Profile icon
Kookiez

this is great!

Profile icon
ObiVibKenobi

Thanks! @Kookiez

Profile icon
tussiez

pog

Profile icon
ObiVibKenobi

Hahaha lol thanks @tussiez

Profile icon
RhinoRunner

what is the LICENCE file all about?

Profile icon
ObiVibKenobi

Ah yes. The license basically says that you can use my code, modify it, duplicate it, etc., but can not use it for commercial purposes @RhinoRunner

Profile icon
RhinoRunner

@ObiVibKenobi ...so like a copyright?

Profile icon
ObiVibKenobi

Yeah, but only partial copyright @RhinoRunner