Skip to content
← Back to Community
Re:Offline the Python, HTML/CSS/JS Offline Editor
Profile icon
AdCharity

Why

Unfortunately, my school blocks pretty much everything, including the text editor app. I found that pretty sad - now I can't even code on my computer locally >:( As such, I created Re:Offline (I changed the name from Re:HTML when I found python support), which is basically an html, css, js and python editor that you can download and use freely.

Features

  1. local storage saving,
  2. file downloading (it will default to the .html file extentsion, but you can easily change that),
  3. tabs (which are usually not supported on text areas),
  4. an iframe/window preview, and even
  5. FILE UPLOADING.
  6. python support
  7. syntax highlighting/numbers lines

Coming

  1. file structure...
  2. auto complete

Dependencies

  1. Skulpt
  2. CodeMirror
    Made with repl.it obviously
Voters
Profile icon
DivyaRasania
Profile icon
Code1Tech
Profile icon
Kopamed
Profile icon
mchapy1
Profile icon
pr0p3rno0b10
Profile icon
MrEconomical
Profile icon
RonaldLeung1
Profile icon
AgastyaSandhuja
Profile icon
amasad
Profile icon
blinkafrootable
Comments
hotnewtop
Profile icon
AdCharity

@Rileygamer21, @PDanielY, @PowerCoder I have tried to implement your suggestions! I will be adding pygame, a file system of sorts, autofill (with js hint), and a better console.
New Features:

  1. Syntax highlighing
  2. Improved file upload
  3. Runs python with turtle graphics
  4. Jacked up js console (working on making it take inputs/work with html "edits")

Python Example

image

Jacked up console (adding to html later, only works for .js files as of time of writing)

image

Profile icon
HackermonDev

@AdCharity hmm codemirror. I wonder how it works.

Profile icon
AdCharity

@PDanielY I'm thinking about switching to ace... I believe code mirror scans the current text and mirrors it some where else with the appropriate styling. The effect is the user spends time on a fake text area but what's actually being displayed is a javascript edited one with syntax highlighing/styles.

Profile icon
HackermonDev

@AdCharity You should switch to monaco

Profile icon
AdCharity

@PDanielY I should switch to ACE

Profile icon
AdCharity

@PDanielY actually monaco looks better. I'll do that - I think that's what repl uses too

Profile icon
HackermonDev

@AdCharity yes , i know

Profile icon
NathanWoo
Profile icon
AdCharity

@NathanWoo thanks but I'm really not that great

Profile icon
Rileygamer21

Tysm now I finally have something to do when my chromebook goes offline :D. Do you think you'll ever be able to make it work with python or pygame?

Profile icon
AdCharity

@Rileygamer21 hmm I can try.

Profile icon
AdCharity

@Rileygamer21 also I re wrote the game quite a bit... I think it could be made better, but it's not bad right now. Nevermind... it seems that my collision in phaser is kind of crap (but I think you could fix that :D)

Profile icon
Rileygamer21

@AdCharity I mean the game is in more of a beta mode I guess. But I'm not very good with javascript/html I'm alot better at python/pygame.

Profile icon
DepthStrider03

wot require isn't defined is js broken :O
image

Profile icon
AdCharity

@DepthStrider require isn't defined on client side JS; it's only defined in server side Node.js

Profile icon
DepthStrider03

@AdCharity ok thanks :) i don't know much about js :|

Profile icon
DepthStrider03

Nice project! However, it seems buggy on my end, i don't know. When I try to run a .py file or a .js file, a blank window pops up but nothing is showing up, such as print statements in python or console.log in js. Is there a working method for python and javascript evaluation and display yet?

Profile icon
DepthStrider03

@DepthStrider nvm im a dimwit I just looked at your screenshots below ;|

Profile icon
ZacharyRude

You should switch to ACE! It's a better editor!

Profile icon
ikerf164

Hey, I was told that you could help me with my javascript problems.. The problem is that I cant make shapes. I put in this ellipse(56, 46, 55, 55); but all the code editors I use say that ellipse isn't defined. do you know how to define ellipse or rect? and if you could tell me how to color it in that would help a lot. Thanks! :) @AdCharity (559)

Profile icon
AdCharity

@ikerf164 yeah I'll invite you to a repl look at your notifications

Profile icon
AdCharity

@ikerf164 join this https://repl.it/@AdCharity/Processing repl doesn't support pde file syntax highlighting, but that's how you add color and whatnot

Profile icon
ikerf164

yeah but can you give me an example of a simple [email protected]

Profile icon
ikerf164

can you give me an example of a simple [email protected]

Profile icon
AdCharity

@ikerf164 you're freakn killing me. DEBES LEER POR FAVOR

image

Profile icon
MrEconomical

very nice!
EEEEEEEEEEEE

Profile icon
AdCharity

@MrEconomical e (I'm working on an update soon)

Profile icon
SixBeeps

Run and preview code in iframe

;)

Profile icon
AdCharity
Profile icon
[deleted]

add image support

Profile icon
AdCharity
Profile icon
[deleted]

@AdCharity oh, nevermind. Also, running in Iframe only works once for some reason

Profile icon
AdCharity

@TaylorLiang hmm I will be working on a file structure that drasticall improves performance so I'll check it out

Profile icon
HackermonDev

Which text editor app?

Profile icon
AdCharity

@PDanielY ? Ik I made like three

Profile icon
HackermonDev

@AdCharity Feature request: Custom javascript console

Profile icon
AdCharity

@PDanielY If I can I will try :D

Profile icon
HackermonDev

@AdCharity If you do find a way please tell me.

Profile icon
AdCharity

@PDanielY the dumbest and probably easiest way is eval() but let's not go there

Profile icon
HackermonDev

@AdCharity probably

Profile icon
PowerCoder

I suggest you number the lines.

Profile icon
AdCharity

@PowerCoder ok I'll try