Share your repls and programming experiences

← Back to all posts
HTML Code Editor & Playground | Hyperground | 100 Cycle Special | New Updates
h
ObiVibKenobi (169)

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

Comments
hotnewtop
amasad (3262)

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

ObiVibKenobi (169)

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

JBloves27 (1519)

Whoa.. @amasad

bows to ultimate CEO Welcome my lord!

FloCal35 (358)

lamooo @JBYT27

When @amasad comments on your post

JBloves27 (1519)

Hahahha, yep, thats me! :D @FloCal35

Whippingdot (407)

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

Whippingdot (407)

@amasad

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

OldWizard209 (982)

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


@moderation

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

leads to this page:

mind the speechifyextension

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

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

CodingCactus (4101)

@amasad can you make someone make it work thx

(pinging teams)
CoolCoderSJ (360)

@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....

CodingCactus (4101)

@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.

CodingCactus (4101)

@CoolCoderSJ I've edited the description now

ObiVibKenobi (169)

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

amasad (3262)

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

Baconman321 (773)

@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).

OldWizard209 (982)

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

maxina (43)

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

maxina (43)

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

elburg (36)

seems pretty cool.

Codeverse (43)

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

JaceBillingsley (18)

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

Codeverse (43)

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

ObiVibKenobi (169)

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

MarcusWeinberger (678)

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.

ThatCoolCoder (18)

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

Codeverse (43)

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)

JaceBillingsley (18)

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

ObiVibKenobi (169)

: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

FloCal35 (358)

After Catastrophe

Ummmmmmmmm @ObiVibKenobi

johnnyfrancis (7)

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

ReyesP (23)

THIS IS AWESOME.

JaceBillingsley (18)

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

RahulChoubey1 (128)

How did you get your license?

RahulChoubey1 (128)

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

Baconman321 (773)

@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.).

SixBeeps (4767)

Add in some templates.

ObiVibKenobi (169)

Ok. Could you give me some examples? @SixBeeps

zplusfour (881)

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

SixBeeps (4767)

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

ObiVibKenobi (169)

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

JaceBillingsley (18)

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

JaceBillingsley (18)

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?

ObiVibKenobi (169)

Ok I’ll start working on that stuff @JaceBillingsley

JaceBillingsley (18)

: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!

JaceBillingsley (18)

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

tankerguy1917 (159)

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.

RhinoRunner (633)

what is the LICENCE file all about?

ObiVibKenobi (169)

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

ObiVibKenobi (169)

Yeah, but only partial copyright @RhinoRunner