Skip to content
Sign UpLog In
This post is read-only. Explore Repls and connect with other creators on Community.View Community
The info in this post might be out of date, check out our docs instead. View docs
49

HTML, CSS, JS Editor App | Jax - Very similar to replit

RYANTADIPARTHI
RYANTADIPARTHI

HTML, CSS, JS Editor App | Jax - very similar to replit

Before I start, I want to remind you to always open this in a new tab.

canvas

click that button circled in red ^^

If you click that, everything will work properly with no problems. Don't try to check out the website in the console window. It won't work.

Alright, now we can start.


I made a fully functioning HTML, CSS, JS Editor App. It took me a very long time to make. This app is very similar to replit, and has almost all the features of replit.

It even has the same design as replit.

Features

There are way to many features for me to list out, but i will give an overview.

you will see this icon on the left side of the navbar on top, once you register and login.

Screenshot 2021-07-29 6.48.48 AM

click on it, and you see a list of options, just like replit. If you know how to use replit, you basically know how to use Jax (the name of this site).

next on the navbar (top). You will see, just like replit all the options available. Use them just like you use replit.

when you click the sidebar option, in the image above, you will see your username too. And beside are your notifications. Click on your username to show a dropdown.

You can click on those options accordingly... just like replit.

I don't need to give any more features, cause just like i said:

if you know how to use replit, then you know how to use Jax.

it has the same things:

  • talk section
  • templates
  • etc....

Few Notices

Some things are different from replit.

  • When you search up stuff in any search bars, always remember to hit enter to get results.
  • when you want to find about a person's profile. Try clicking on their name. It takes you to their profile. You can also hover over their username, but you can only do that in the talk section.

Detectors

There are three detectors in this website. The detectors are for posts. When you add a post to this site, you must pass three detectors:

  • gibberish
  • profanity
  • duplicate

If you're trying tp spam or post useless posts, this detector will not allow you, and will stop you.

If you try to curse and use bad words, the profanity detector will detect it.

Finally, if you try to post a duplicate of another's post, this detector doesn't allow you.

If you think any of these detectors are wrong, and stopped you without you doing anything, please tell me. I will fix it.

Another thing is, if you want to see the spotlight version of your own jaxes, just go to the talk section or something and click on your username. It will take you to the profile page, and you can click any jax from there. It will show your spotlight page.

If other users want to check our other user's spotlight jaxes, it's normal. Just like replit. Click on a user's username to see their repls. Same as replit.

One more thing is, in Jax (name of this site), the Share section and Tutorial section are in the same tab. They will, of course have different badges, but are in the same sections.

I thought that since both share and tutorials are about showing creativity and all, I thought to just group them.

So when you create a tutorial or share post, you will see a box below. Click it if you want to post a tutorial. If you want a share post, then don't click it.

Screenshot 2021-07-30 11.12.56 AM

So if you want to check out share section or tutorials, just remember that they are in the same section. The badges show if it's a share or tutorial.

When you want to use JS or CSS, use <script> and <style> tags.

If I remember anything else, I will add it here.

Instructions

If you know how to use replit, you know how to use Jax (the name of this site)

So not many extra instructions for Jax.

If you don't know how to navigate, or if you're have difficulties, please comment to me, and I will help you.

Markdown and mentioning

Here's the link for the full Jax tutorial of markdown. I made a tutorials post in Jax, just like Replit.

Markdown Tutorial (Jax)

You can use markdown in Jax too. use them in the talk section. posts, or coments, replies. Whatever. There are just a few differences.

  1. When you want to use strikethrough in Jax, use <s>text</s> or <del>text</del>
  2. links only work when you do: [NAME OF LINK](URL). If you just do LINK, it doesn't work.
  3. when you post images, do: ![NAME OF IMAGE](URL). If you just do URL, it doesn't work.

I think those are the only differences in markdown.

EXTRA: You can also do mentioning in Jax. Same format.

@username

Only thing is, you must mention users only in the beginning of your comment, reply or description or etc or at the **end ** of your coment, reply or description or etc.

just a reminder: Everything else in markdown is the same as Replit. You can even use code blocks.

Moderators

You can find out if a user is a moderator or not by looking at their username.

✪ - This badge indicates that the user is a moderator.

⍟ - This badge indicates that the user is an admin.

You will also see a list in the talk section. The list is on the right side. It shows all the staff members. (mods and admins). You can also click on usernames to go to their profile, and check the badges. Like replit.

I will be picking moderators, based on their actions on Jax. If they seem responsible or whatnot, i will select them accordingly.

Moderators have a lot of extra privileges.

If you were selected a moderator, you will see an extra section on the navbar.

Screenshot 2021-07-29 7.21.39 AM

You can click on the mod controls dropdown, and you will see a list of options:

  • all reports
    • in this, you can just see the user's reports and resolve them by going to wherever they are.
  • all user's data
    • for this, it's a bit complicated, so there's a separate instructions page for you in there. Read it, and you will get it.
  • bug reports
    • you can check out user's reports of bugs. If you can fix it, please do, or if you can't, let me know and i will fix it.
  • staff chat
    • this is where mods and admin (me) will chat, and discuss about some stuff. Go to your home page. You will see more info about this there.
  • deletion requests
    • if a user wants to delete their account, they will have to request it. You have the option to delete or not. But first, you must discuss with me.

There's more functionality for mods. You will soon find out with a bit of exploring, and discussion in the staff chat.

Moderator must do their tasks efficiently as the replit mods. More will be discussed in the chat.

Banning

Any user who violates the rules will be banned. This includes:

  • spamming
  • cursing
  • duplicating
  • trying to hack the site
  • Any other things you think is not right too.

Any of the above, including any new ones, or anything that seems bad, please do not do. Or you will get banned

Credits

Thanks to these people:

@Coder100
,
@SixBeeps
,
@Bookie
,
@ch1ck3n
, and
@OldWizard209
.

@Coder100
- for helping me by giving a few SVGS like the marking answers SVG and some others.

@SixBeeps
- for more SVGS

@Bookie0
- For options on color pickers

@ch1ck3n
- For some other SVGS, and a little bit of help with markdown (even though I didn't use it, and it didn't work)

@OldWizard209
- For markdown too (even though this didn't work either and i didn't use it).

Pinging

@Whippingdot
wanted me to ping him when I post this.

Suggestions and more

If any of you have any suggestions or feedback, please let me know.

Also, please let me know if you have any problems with the website. I'm pretty sure there are some, since it's a very big site, and took a lot to code this.

Just let me know if you have any concerns.

Enjoy!

1 year ago

Voters

Comments

TopNew
1
DwightScott
DwightScott

Thanks for sharing the codes for JS Canvas. Javascript is very hard to learn, I found some dating websites who uses Judo Script as their programming language.
Read this article to know more: Dating Websites Using Judo script | 2019

8 months ago
1
Yoplayer1py
Yoplayer1py

It's in deep sleep.. not wakin up..

1 year ago
1
RYANTADIPARTHI
RYANTADIPARTHI

@Yoplayer1py
Yeah, because the server is down.

1 year ago
1
Yoplayer1py
Yoplayer1py

@RYANTADIPARTHI
make it up n use a replit uptime tool(I can help) when ?

1 year ago
1
RYANTADIPARTHI
RYANTADIPARTHI

@Yoplayer1py
i actually used a keepalive tool, but it only works sometimes.

1 year ago
1
1

@RYANTADIPARTHI
Do you think I could work with you on any of your frontend repls? My best site so far: https://spotlite.repl.co
P.S. My alt account is cutech which is the one I actually use.

1 year ago
1
RYANTADIPARTHI
RYANTADIPARTHI

@devbois
hi, i don't really make frontend projects. I just use frontend in my website projects like this one for example (the post).

1 year ago
1
Battledash2
Battledash2

Wish it wasn't stuck on Waking up.. Kindda don't feel like having to wait for someone to start up the server is ethical..

1 year ago
1
RYANTADIPARTHI
RYANTADIPARTHI

@Battledash2
i can start it up tomorrow. I'm busy now. Please ask tomorrow.

Thanks!

1 year ago
1
Battledash2
Battledash2

I'm probably gonna forget tomorrow- that's the point!

@RYANTADIPARTHI

1 year ago
1
CarterDixon
CarterDixon

BRUH it's not waking up...

1 year ago
2
DerpBurgerPlayz
DerpBurgerPlayz

hey dude its not waking up lol

1 year ago
1
RYANTADIPARTHI
RYANTADIPARTHI

@DerpBurgerPlayz
yes, because i turned off the server. I can turn it on. Just tell me if you want it turned on.

1 year ago
1
williamrownd
williamrownd

@RYANTADIPARTHI
Can you turn it on please?

1 year ago
1
williamrownd
williamrownd

@RYANTADIPARTHI
Was not able to see it, I recommend using something that keeps the server alive 24/7, it would be more effiencent.

1 year ago
1
CarterDixon
CarterDixon

@RYANTADIPARTHI
Can you turn it on please? why can't you just always have in on?

1 year ago
1
Korbindev
Korbindev

If I were to give you guys full credit and Make sure of it, can you teach me how i can make myself mod on my own site

1 year ago
1
RYANTADIPARTHI
RYANTADIPARTHI

@Korbindev
uhh thanks! But what do you mean by guys? I'm the only one who did everything. I collaborated with no one. And what do you mean make yourself mod on your own site?

Please explain your comment in more depth.

1 year ago
1
Korbindev
Korbindev

oh sorry I was trying to make something similar to this but i want to know how you did it I was also wondering if you could help me make a django sm app and I need a [email protected]

1 year ago
1
RYANTADIPARTHI
RYANTADIPARTHI

@Korbindev
oh. So you want me to be a mod for your app which is similar to mine right? Well, if that is right, then sorry, but I can't really help you, because I'm busy right now making something else... So maybe sometime later...

1 year ago
1
fuzzyastrocat
fuzzyastrocat

This is kinda interesting, and looks like you've put a good deal of effort into it, but I'm not really sure what the purpose is?

Also, what's a "Jax"? You do realize that "REPL" is actually a real acronym that has a meaning, right?

1 year ago
1
RYANTADIPARTHI
RYANTADIPARTHI

@fuzzyastrocat
if you looked at the design, it looks like replit right? And it has almost all of the features of replit. And thanks! i did put a lot of effort into it.

I do know what repl is. It's an acronym, but I haven't thought one for Jax, one day, the name just struck my head, and I liked it, so I just put it.

Thanks though!

1 year ago
1
fuzzyastrocat
fuzzyastrocat

@RYANTADIPARTHI

if you looked at the design, it looks like replit right? And it has almost all of the features of replit.

I'm still not really sure how this illustrates what the purpose is, but okay

It's an acronym, but I haven't thought one for Jax, one day, the name just struck my head, and I liked it, so I just put it.

I mean, as a user I'd be fine with "Jax" as the name of the entire website, but my issue is really that making the environments called "jaxes" instantly makes me think "Oh, Jax is a thing that means something, what does it mean?" But it actually doesn't mean anything, which to me is a bit misleading.

(Also, usually acronyms are created by taking relevant words => acronym, not "this name sounds cool" => come up with words to fit the name. The latter is usually jokingly called a backronym.)

1 year ago
1
RYANTADIPARTHI
RYANTADIPARTHI

@fuzzyastrocat
i don't know what you mean by purpose. I made the site just cause I want to. Do people sometimes program for a purpose? Sometime times it's for fun. So I guess this is for learning or some fun. I just felt like making a complicated site, so I did.

Website names don't always have to mean something. I don't see how calling them "jaxes" is misleading, and I don't know why people should care. It's just a name, and it's called that.

1 year ago
1
fuzzyastrocat
fuzzyastrocat

@RYANTADIPARTHI
Okay, so you just did it "because you could". That's a purpose (which was what I was asking about), all good!

Website names don't always have to mean something.

Indeed! If you read my above comment, you'll note that I take no issue with calling the website Jax. The issue I have is with calling each repl-esque programming environment a "Jax". The reason I find it misleading is because there's already a name for it — repl, environment, etc. Calling it a "Jax" makes it seem like it's somehow different from what's already been created (and is generally known), but that's not the case.

1 year ago
1
RYANTADIPARTHI
RYANTADIPARTHI

@fuzzyastrocat
Yes, but just because this is a replit clone, it doesn't mean the name "Repl" must be used. Creativity wise, I chose my own things, like the website name, and others. Naming what a "repl" is generally called on my website comes under creativity, therefore, based on the website name, I called it a "Jax(es)". Like how replit - The name, and then repls, which comes from the name. On my site, it doesn't have to be called a repl, just cause it's a clone.

So there's no reason for it to be misleading, when the name has no purpose. It's just a creativity thing.

1 year ago
1
fuzzyastrocat
fuzzyastrocat

@RYANTADIPARTHI
I'm by no means saying that you must use "repl", there are plenty of other words like "environment" or "vm" that would apply.

I do get the creativity argument, but I'd have to disagree that "the name has no purpose". A name gives the user an idea of what something is (that's why a name exists anywhere for that matter). So to name it something that's different from what it actually is makes the user think there's something unique about this item — but if that's not the case, I find it misleading.

Like how replit - The name, and then repls, which comes from the name.

This is backwards though — REPL (as a name) already existed, this site allowed you to create a REPL (and a REPL only at the time, iirc) in many languages and so the site name followed from that.

1 year ago
1
RYANTADIPARTHI
RYANTADIPARTHI

@fuzzyastrocat
maybe for some users, the name has a purpose, but for others, I'm pretty sure it doesn't.

A name gives the user an idea of what something is (that's why a name exists anywhere for that matter).

Yes, I agree with this point, but from my previous point, some websites have names that don't actually mean something. They just liked it, and it stuck.

The same thing here. Replit is one of the sites with the names that mean something, but some sites like mine have names with no meaning.

But I'm still not sure of the misleading. I don't see how names matter in misleading.

1 year ago
1
fuzzyastrocat
fuzzyastrocat

@RYANTADIPARTHI
I'm not really sure why you keep bringing up "website name", I get that website names don't always have a meaning and I've acknowledged that in previous comments. My point is about a product/service offered by the website — generally, those names do have something to do with what they are. (And that's for the reason that I've stated previously: a good product name helps the user figure out what the product is.)

I don't see how names matter in misleading.

I've created a new product, the Kwedu! Come check it out!
Oh, by the way, it's a lawnmower.

Now, to me when I hear "a new product, Kwedu", I think "oh okay there's something new here". Not "oh this is probably a slightly different version of something else". So, to me that's misleading.

To exaggerate my point, if I name a product "the ultimate soda" and it's actually rat poison, I think that would matter with respect to being misleading?

1 year ago
1
RYANTADIPARTHI
RYANTADIPARTHI

@fuzzyastrocat
hmm, ok i see what you mean by misleading now, but here's what I'm saying.

Users know that this website is a replit clone, so when I refer to the code editors as jaxes, everyone knows that jaxes = editors, because repls = editors.

There isn't any misleading in that. And also, making an acronym for jaxes doesn't help either. Since users know what this is, the name doesn't have to mean anything.

Besides, I did specify that jaxes mean code editors, and even without me specifying, users already know that.

But yes, for an extremely new, original thing, then it is important to name it. Though an acronym is just an example for creativity.

1 year ago
1
DerpBurgerPlayz
DerpBurgerPlayz

need an admin or a moderator?

1 year ago
1
RYANTADIPARTHI
RYANTADIPARTHI

@DerpBurgerPlayz
sure, i'll make you a moderator.

1 year ago
1
RYANTADIPARTHI
RYANTADIPARTHI

@DerpBurgerPlayz
could you tell what you're username is on the site?

1 year ago
1
DerpBurgerPlayz
DerpBurgerPlayz

@RYANTADIPARTHI
you are the ONLY person i talk to on here but ill try!

1 year ago
1
DerpBurgerPlayz
DerpBurgerPlayz

@RYANTADIPARTHI
same as usual, DerpBurgerPlayz, except its not letting me sign in now for some reason xd

1 year ago
1
DerpBurgerPlayz
DerpBurgerPlayz

@RYANTADIPARTHI
problem solved, made a new account

1 year ago
1
RYANTADIPARTHI
RYANTADIPARTHI

@DerpBurgerPlayz
hmm, i think it's because it didn't save it properly. Try registering again.

1 year ago
1
RYANTADIPARTHI
RYANTADIPARTHI

@DerpBurgerPlayz
ok, thanks. I made you a moderator. Read the description on this post for more info on mods. Also, try to explore the site more for moderator features. You can discover a lot.

1 year ago
1
DerpBurgerPlayz
DerpBurgerPlayz

@RYANTADIPARTHI
found admin panel! and ill get right to it!

1 year ago
1
RYANTADIPARTHI
RYANTADIPARTHI

@DerpBurgerPlayz
What admin panel? Oh you mean mod controls? Yes, that's the mod panel. There are other features, other than that. Keep exploring.

Also, I'm the only admin, so I have a way more advanced different panel. But don't worry about that. Just go on with moderator exploring.

1 year ago
1
RYANTADIPARTHI
RYANTADIPARTHI

@DerpBurgerPlayz
also, in the announcements section, don't post just anything. only mods can post in announcements, and that section is only for announcements. Like serious announcements. If you want to post your stuff, just do it in the tutorials and share.

1 year ago
1
DerpBurgerPlayz
DerpBurgerPlayz

@RYANTADIPARTHI
check online users, lots of spam accounts

1 year ago
1
DerpBurgerPlayz
DerpBurgerPlayz

@RYANTADIPARTHI
i wasnt aware that i did that xd can you tell me how to delete it?

1 year ago
1
RYANTADIPARTHI
RYANTADIPARTHI

@DerpBurgerPlayz
let's talk about this in the staff chat.

1 year ago
1
RYANTADIPARTHI
RYANTADIPARTHI

@DerpBurgerPlayz
same way you delete posts in replit. Don't you see the delete button?

1 year ago
1
DerpBurgerPlayz
DerpBurgerPlayz

@RYANTADIPARTHI
go on staff chat if you can

1 year ago
Load more