v3.5 Public

Edit your code from
anywhere & everything.

AIlury, the perfect code editor for mobile coders; from mobile coders for mobile coders. This editor supports any device, including computers/PCs but the environment is created to be the best for mobile devices, such as Tablets or Phones, from any brand such as Apple.

Editor Structure.

Ailury Studio is made to work on any device but to achieve this goal, a lot of structure is needed. Here is a little about the structure.

Sidebar

The sidebar holds a lot of features and serves to navigate the editor. File Navigation is made possible without the sidebar but the sidebar is still crucial to access a lot of helpful features and more easily navigate the editor.
On smaller screens the sidebar is hidden by default but can be opened with the sidebar button, in the bottom left corner, among the file tools (if you are currently editing a file), or in the top left corner, if you are viewing your code.
On larger screens the sidebar is open by default but can be closed with the same buttons as on small screens.

Tools

File editing are at the top of the current file but can be repositioned on large screens. If you are using a computer or a tablet, you can reposition the tool bars to fit your vision of the ideal editor. You change the layout in the "layout" .

Overlays

Overlays aka , as the name says, overlay themselves over the editor. They either display information and/or give you access to more to edit code or other aspects of the editor. We focus on the ability to customize the editor, therefore there will be no shortage of customization options, and since the editor is primarily for mobile devices, there will also be no shortage of editing tools or helpful overlays.

Quick Testing Made Easy.

Ailury Studio provides the user with testing windows for supported languages.

HTML Testing:

                                    <!--  HTML document -->
                                
                                    <!DOCTYPE html>
                                
                                    <html lang="en">
                                
                                    <head>
                                
                                     <meta charset="UTF-8">
                                
                                     <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                
                                     <title>My Website</title>
                                
                                     <link rel="stylesheet" href="styles.css">
                                
                                    </head>
                                
                                    <body>
                                
                                     <h1>Header</h1>
                                
                                     <script src="script.js"></script>
                                
                                    </body>
                                
                                    </html>

index.html

⌕

Python Testing:

Every file has a run button in the bottom bar and when you click it in a .py file, the editor displays the Python console, in which you can run the code and see what your python code displays.

Status: Inactive

Run

⌧ ×

▷

The Mobile-First Philosophy.

Ailury Studio supports all devices but Mobile support takes a front seat. The editor has countless gestures / features / and tools, to make coding on mobile devices easier. Programming with HTML, CSS, Javascript, and Python, has never been easier on mobile devices.

Accessibility

Ailury Studio works on any screen size, from phone all the way to computer screens.
The editor is also very user accessible. It provides you with easily accessible tools. No hidden keyboard shortcuts, it's all there for you to see.

Open, Setup, and Start Coding

We focus on usability by making it very easy to setup Ailury Studio.

Touch

Ailury Studio comes with countless integrated gestures to make coding more efficient on mobile devices.
Move, wrap, and delete lines of code using simple, optimized gestures.

Try It Out

Test the selection mechanics with our editor integration code. To select a line swipe right on it or hover over it and click the "ArrowRight" key, to undo that simply do the same thing but the other way around. You can also double select lines, this will make it so a line is "double selected" and if you do that with 2 lines, all lines inbetween, including the double selected lines, will be selected.

                                // Integrate and execute this code to open the editor with specific code set by you
                            
                                localStorage.setItem("AIluryStudioPendingFileName", "FileName.js");
                            
                                // ^- set the file name
                            
                                localStorage.setItem("AIluryStudioPendingFileContent", "console.log('The File Content')");
                            
                                // ^- set the file's content
                            
                                localStorage.setItem("AIluryStudioPendingFileRun", "false");
                            
                                // choose "false" if you want to redirect for code editing and choose "true" if you want te redirect for code testing/running
                            
                                // ---------------------------------------------------------------
                            
                                // Now open AIlury Programming Studio in a new window or in an <iframe>
                            
                                window.location.href = 'https://ailury.com';

Personalize Everything.

Customize every aspect of the Editor to create your ideal work-space.

Endless Themes

Select from built-in themes or use the theme editing tools to make your own themes or customize existing ones for a truly personal environment.

pink

purple

blue

green

Personal Tool Layout

Easily resize the sidebar or hide it entirely, and, on larger screens, choose the tool layout for maximum efficiency. You also get options to modify the elements that are effected by the selected layout.

Workspace Grids

Choose different grids for the editor's background. From dot grids to line grids, I'm sure there is a grid for you, if you want one at all.

Dozens of tools

Ailury Studio code editor has dozens of tools available for both small and large screens. You can also decide if you want them visible in your envirenment or not, incase you don't need or want some tools. Tools help you edit the code in your file's and are beneath and above your file's code content, by default but they can be repositioned with the "layout" section.

Countless Sections

AIlury Studio code editor provides you with countless sections, all the way from text replace sections to editing tool sections. Tye many sections on Ailury.com make it easy to use and interact with the editor.

Helpful Features

Choose different grids for the editor's background. From dot grids to line grids, I'm sure there is a grid for you, if you want one at all.

Integrate The Editor.

We allow the editor to be integrated through iframes. You can also redirect your users to our editor with preditermined HTML, CSS or JavaScript code.

                            // Integrate and execute this code to open the editor with specific code set by you
                        
                            localStorage.setItem("AIluryStudioPendingFileName", "FileName.js");
                        
                            // ^- set the file name
                        
                            localStorage.setItem("AIluryStudioPendingFileContent", "console.log('The File Content')");
                        
                            // ^- set the file's content
                        
                            localStorage.setItem("AIluryStudioPendingFileRun", "false");
                        
                            // choose "false" if you want to redirect for code editing and choose "true" if you want te redirect for code testing/running
                        
                            // ------------------------------------------------
                        
                            // Now open AIlury Programming Studio in a new window or in an <iframe>
                        
                            window.location.href = 'https://ailury.com';

↺

Undo

Advantages and Limitations: The editor provides you with an undo button that can undo any changes that you made to your code. Although this is a very helpful features, it has its limitations; This tool can not undo changes that where made outside the file and this feature does not give you the ability to redo what you have undone. If you want to redo what you have undone there is a redo button.

The Limit: Most tools come with their unique set of settings, this one is one of the many tools that has settings. I'm not going to explain every setting but one of the settings for this tool is the "undo limit". A limit might not seem very appealing but since browsers only have a limited amount of local storage for every user, having a limit is very much necessary but we still give you the ability to remove the limit.

↻

Redo

Advantages and Limitations: The editor provides you with a redo button that can redo any action that you have undone in your code. Although this is a very helpful features, it has its limitations; This tool can not redo what you have undone if you edit the file after undoing changes.

The Limit: Unlike the undo button, this one has no history limit, since the history is immediately erased after a change has been made in the currently open file. Although there are no history limits for the redo tool, there is a limit to how quickly you can spam it, due to its animation; you can turn this limit off though, by turning of the button animation in the file settings.

□

Copy

Versions: This is one of a few tools that has 2 versions. The editor has 2 file tool-bars the top tool bar that only affects selected lines (by default located at the top) and the tool bar that affects all lines (by default located at the bottom); depending on which one you click, you either copy the entire file's text contnent or just the the text content of selected files.

Clip Board: This tool also has settings but in the settings section you'll find the clip-board. The clip-board is not saved but it is preserved while you don't refresh the page and anything you copy on the page will be added to the clip-board, except if you copy the contents of an entire file, but you can turn that on in the settings.

⌧

Delete

Versions: This tool is also one of those with 2 versions. Depending on which one you click, you'll either delete all lines in a file or only the selected ones. You can also go into the settings to delete selected lines there, incase the selected lines are very spread out and you don't want to scroll through the entire file to make sure you didn't selected something by accident.

Effectiveness: This is a very effective tool, since it's easy to use and anything deleted with this tool can be undone with the undo button/tool. This tool can also be set to: only delete lines content, which makes it so it doesn't delete the lines but just the text in them.

Comment

Advantages: This tool allows you to comment selected lines instantly, in the current file, instantly. This tool also operates relatively to the programming language you apply it on, meaning: you won't get the wrong type of comment on supported programming languages.

Limitations: This is a very useful tool, but it has its limits. This tool does not support every programming language but it supports the ones that you would use in this editor, being: HTML, CSS, JavaScript, and Python.

↓

Move Down

Advantages and Limitations: This tool allows you to move selected lines down. To select a line, one just has to swipe right on a line and depending on it's state, it will go into a selected state. In the settings one can choose how many lines are skiped when moving down but it's important to note that hidden lines, due to folding, are skiped automatically regardless of the jump size.

Limitations: This tool obviously does not let you move lines down past the bottom of the file, this means that it could lead to a jump cut at the bottom. This tool also only lets you move lines down, not up, although the next tool will make it possible to move lines up to. If your goal is to move a line up to undo the moving down, just click the undo button, it also undoes any moving of lines.

↑

Move Up

Advantages and Limitations: This tool let's you move selected lines up. In the settings you can set the jump size (how many lines are skiped when moving a line up) but it's impartant to note that the jump size to move lines up does not apply to moving lines down and vice versa; this means when you set the jump down to 5 and jump down and then up, you are not 4 down and not where you started.

The Limit: Here you can also not escape the file, so the sky is the limit; the sky being the top of the file. All the same rules of moving down apply here aswell but for moving up; this means: hidden lines, due to folding, are skipped aswell, regardless of jump size, and moving lines up can also be undone with the undo button.

⚠

Difference: This tool is one of the tools with 2 versions, one for selected lines and one for all lines but in this case they are much different; the one for selected lines toggles the pinned state of selected lines while the one for all lines unpinnes all lines in the file but you don't need to unpin them all, nor do you have to toggle a line to remove it from the pinned state, you can also go into the settings to unpin it.

Advantages: Pinned lines stand out with the bright red background color, making them easy to spot while scroll through file's but this color does not make them hard to work with, since they get the regular focused line background, when they are being edited. pinned lines are also the top search results in file searches but this can be disabled in the settings.

☾

Sleep/Disable

○

Awake/Enable

Advantages: This tool technically has 2 versions similar to the "pin" tool but the version that affects all, looks differnet. The one with the moon icon disables all selected lines while the one with the circle or sun icon, enables all lines, but similarly to the "pin" tool you don't need to enable all lines, you can go into the settings to enable lines individually.

Effect: Disabled lines can not be edited or interacted with, you can move it by moving lines above or below around it but the line by itself can not be edited. This may seem like a disagvantage but this can be used to lock a file, for example, if you disable all lines in the file.

⌕

Search

Search, not to be confused with teleport "⌕" lets you search in your current file. This tool is with the selected tools but it searches all lines. In this tool's settings you can enable or disable the prioritization of pinned lines during search and this affects all search functions, including the separate search which is also effected by the line number toggle that is in the search settings of this tool.

Limitations: This tool only allows you to search the current file.
Advantages: It's quick to use and it comes with additional features like: regex search. In the file settings you can set a regex search string, for example: "r/" and anything written after the regex string will be treated like a regex in the search system.

⌕

Teleport

Teleport, not to be confused with search "⌕" lets you scroll to a line instantly. This feature is with the tools that effect all lines and if you enter a number and click the "Enter" key, You will be teleported to the line that you entered the index of or at least to the closest point possible.

Limitations: This tool can only teleport you to lines in the current file and does not scroll you to hidden lines but it gets you as close as possible to the line that you entered the index of.

Attach Note

This tool allows you to add notes to selected lines. You can add line notes by either using this tool or you press and hold a line until you get a options popup that allows you to add a line note to the line you pressed, specifically. If you wish to remove notes from lines, simply add an empty note to the lines you want to remove the notes from, or go to the and open the options for this tool, there you can remove notes from lines individually. If you wish to delete an entire note from all lines, go to "project notes" and open the file you want to remove the note from, then click on the note and click "delete" on the popup. If you want to no longer have your code full of comments but still want the information present, consider applying comments as line notes. In the , you can open this tool's options and click the button that says: "add comments as line notes", and this will add comments as line notes.

Advantages and Limitations: Line notes are especially useful if your goal is to write code without comments but still want information on what your code does in certain parts, without having to write notes yourself and keep track of what index every line is at, to keep the notes up to date. Although line notes can come in handy, they have their limits when the tools are used to apply them; Line notes are file specific and are not applied to selected lines outside of the currently opened file, this means, if you want to apply notes to lines in multiple files at once, you won't be able to and will have to apply notes for every file individually. Another limitation is that if you add multi-line comments as line notes, you have to keep in mind that you have to have rendered/seen the entire comment in the form of a comment before, to have the full comment be added as a line note, this is due to how the syntax highlighting logic works.

⌘

Commands and Short-cuts

Commands: Commands allow you to enter a short string with capital letters after a "/" to get diffrent string that might not be possible to create with your current keyboard or with any keyboard, since many characters are just not available on keyboards. This is not limited to characters though. Although the default commands are all signs, you can also make code inserts but shortcuts may be a better choice for that.

Short-cuts: Short-cuts allow you to write a string after "/:" and that string will then be replaced by a different string but what makes this diffrent from commands is that instead of just replacing the text with a different one and placing the cursor at the end of it, it replaces the text and puts the cursor in a spot in the replacement text. There are default short-cuts but you can also create your own in the settings of this tool.

●

Trim

This tool removes all spaces from the left and right of selected lines, not in the center. For example: " text here " becomes "text here".

→

unfold

This tool unfolds all folded lines in a file. You fold a line by swiping a line in a neutral state to the left; now if the lines meets all the conditions to become a folded lines parent element, it will move to the left and display an arrow where the line number would normally be, if line numbers are enabled. Something important to note is that when a line gets folded, all lines that get hidden also get unselected, if they are selected. Also, if you are unfolding lines in order to select a code block, you can also simply double selected a line before and after a block (by swiping right on lines twice) and all lines in between the 2 double selected lines will be selected and any folded lines are unfolded and selected. Now when this tool's button is clicked, it will unfold all lines in the file, making the hidden lines visible again, this can also be achieved by swiping a folded line to the right but this will only unfold all lines hidden under that folded line, not all lines in the file.

←

unselect

This tool unselects all selected lines. You select a line by swiping right on a line (if it's not folded or already selected) you'll know when it's selected since it will have a different color (usually, depending on the theme).

↤

Remove Indent

This tool removes spaces from the left of selected lines. Indents in code are spaces on the left of any text that is not a space. This tool allows you to remove these spaces and the amount of spaces it removes can be set by you in the tool settings.

↦

Add Indent

This tool does the opposite of the remove indent tool, it adds them. Indents are spaces to the left of any text that is not a space and these are added by this tool. Indents can be added manually, just how they can be removed manually but this makes it easier to add them, since it adds them to all selected lines and in the tool settings you can set how many spaces are added every time you click the tool's button.

⤻

Replace/Replace All

Functionality: This tool is one of the tools with 2 versions, one that affects only selected lines and one that affects all lines. This tool allows you to enter a replace value and a replacement value, then at the top you can decide if you want the replace value to be treated as a regex or a normal text. When you then click the replace button, the replace value will be replaced with the replacement value in either all selected lines or all lines, depending on which version you clicked.

Limitations: This tool only affects the current file and it only lets you replace text within one line, not a series of lines. This tool can not replace text across lines, only text in individual lines.

◁

Run

Functionality: This tool allows you to toggle the run section, directly from within the file. What makes this tool extra useful is that it shows a python console/terminal if you click this tool's button when in a ".py" file.
Limitations: This will only make the preview section appear over the file, it won't bring you to a or the dedicated preview section.

▷

Console

Functionality: This tool is in the top corner of the view section, if the "console" feature is toggled on, in the sidebar, and on click of the tool it will open the console in the view section. It's important to know that if you toggle the "console" feature you'll have to refresh the viewport, or the console won't work.

Limitations: For the logic of the console to work, it is integrated partially into the file that you are running, if anything goes wrong during the implimentation, unexpected errors might occur, that are not related to your code. With this in mind, it is recommended to run the code without the console turned on, if an unexpected error is thrown, to make sure the issue is in your code and not in the console integration.

The search feature allows you to search for lines in any file, containing the entered text; you are not limited to plain text though, you can also toggle the "*R" sub-feature, above the search feature, for the search feature to treat your input as a regex. You can also make it so the search feature is case sensitive, by toggling the "Aa" sub-feature. If you want to search individual files you can use the in file search function but you can also select a specific file that you want to search in, above the search feature, among the sub-features.

Indentations. Indentations are the spaces infront of a text in a line of code. Usually you choose an indentation size and stick with it, since changing it would be super tedious, especially in large code bases, but ailury studio provides you with features that let you easily customize the standard indent size of tge editor. In the you can scroll down until you see the space indentation option, and if you open the features details, by clicking the chevron on it's right, you get the customization options. There you can choose the standard indent size, you can decide if you want to have the standard indent size applied to uploaded files, and you can apply the standard indent size to the file that you are currently in the settings of.

These are the file nav bars, here is where you can edit a file's name but this is not all. If you hold this file nav element the "files" section will be opened, and if you swipe up on a file nav element the will open.

←index.html→

The suggestions feature is disabled by default but you can enable it in the . This feature, when enabled, gives you code suggestions in a container below the cursor, while you type in a file. To accept a suggestion simply click on the one that you want to apply. Dynamic suggestions are also available, they are turned on by default and make it so relative values like variable names and function names are suggested, if you experience lag while typing with suggestions enabled, you might want to turn dynamic suggestions off, in the .

This feature is inside the and it allows you to delete all lines in the current file that have no text aside from spaces.

delete empty lines

This feature is inside the in HTML, CSS, Python, or JavaScript files and it allows you to to delete all comments from the current file. The supported comment types are: HTML, CSS, JavaScript, and Python. Although this tool can be useful, it is not fully fleshed out and relies on 2 factors; these factors are: no strings that can be confused with comments, and comments that go over multiple lines have to have been rendered at least once to be correctly deleted.

delete comments

This feature is in the sidebar and it toggles the file section to full screen.

The timeline feature is a feature in the sidebar, and when enabled, you will receive a pop-up asking you to enter the amount of hours (on the left) and the amount of minutes (on the right) that the timeline should take to complete. Once you submit the entered time, by clicking the "submit" button, a line will appear on the left of your screen. As the entered time runs out, the time-line will fill with color from top to bottom, until it's completely filled. Once the time-line is completely filled, you'll get a pop-up, notifying you of its completion. If you wish to reset the time-line, you can click the time-line and you'll get the option to reset the time-line by resubmitting the time you chose previously.
You can disable the time line at any point, by just toggling the timeline feature: off, in the sidebar.

⌘

commands and shortcuts

This is a section that allows you to see all commands and shortcuts. You create shortcuts and commands in the settings but here you see them all, including the default ones. When you enter any given command or shortcut (on the left) it will be replaced by the value next to that command (on the right) or the described shortcut output (on the right).

commands

/ALERT ⚠

/ARROWBOTTOMLEFT ↙

/ARROWBOTTOMRIGHT ↘

/ARROWDOWN ↓

/ARROWGOLEFT ↤

/ARROWGORIGHT ↦

/ARROWLEFT ←

/ARROWRIGHT →

/ARROWTOPLEFT ↖

/ARROWTOPRIGHT ↗

/ARROWUP ↑

/BIGSPARK ✶

/BOTTOMLEFTEDGE ◣

/BOTTOMRIGHTEDGE ◢

/SMALLCHECKMARK ✓

/EMPTYCIRCLE ◯

/BIGCROSS ✘

/CROSSINCIRCLE ⊗

/CROSSINSQUARE ⌧

/CROSSNOTINSQUARE ×

/CUTOUTCIRCLE ◌

/DIAMOND ◆

/EMPTYSPARK ✧

/EMPTYSQUARE □

/EMPTYSTAR ☆

/EMPTYTRIANGLELEFT ◁

/EMPTYTRIANGLEDOWN ▽

/EMPTYTRIANGLERIGHT ▷

/EMPTYTRANGLETOP △

/FILLEDCIRCLE ●

/HEART ♥

/INFINITE ∞

/MAGNIFYINGGLASS ⌕

/MINUS -

/MOONLEFT ☽

/MOONRIGHT ☾

/MOVABLE ✣

/EIGHTHNOTE ♪

/BEAMEDNOTE ♫

/CHORDSYMBOL ♬

/QUARTER NOTE ♩

/PAPERPLANE ➤

/PENCIL ✎

/PLUS +

/REFRESHRIGHT ↻

/REFRESHLEFT ↺

/REGISTERED ®

/SIDEBAR ≡

/SMALLCROSS ×

/FILLEDSPARK ✦

/FILLEDSQUARE ■

/FILLEDSTAR ★

/SUN ☼

/TOPRIGHTEDGE ◥

/TOPLEFTEDGE ◤

/TRADEMARK ™

/TRIANGLELEFT ◀

/TRIANGLERIGHT ▶

/TRIANGLEDOWN ▼

/TRIANGLETOP ▲

/UPDOWNLEFTARROW ↵

short-cuts

/:FUNC function

/:IF if statement

/:FOR for loop

/:TRY try catch

/:DIV division tag

/:BTN button tag

/:SPAN span tag

/:IMAGE image tag

/:P p tag

/:H1 h1 tag

/:H2 h2 tag

/:H3 h3 tag

/:H4 h4 tag

/:H5 h5 tag

/:H6 h6 tag

/:AT a tag

/:UL ul tag

/:LI li tag

/:OL ol tag

/:TABLE table tag

/:TR tr tag

/:TD td tag

/:TH th tag

/:INPUT input tag

/:FORM form tag

/:LABEL label tag

/:IFRAME iframe tag

/:NAV nav tag

/:HEADER header tag

/:FOOTER footer tag

/:SEC sec tag

/:ARTICLE article tag

/:ASIDE aside tag

/:MAIN main tag

Animations

This sections allows you to choose the animation for file switching, section closing and opening and other parts. You can open this section by clicking the "animations" button in the sidebar.
How to select an animation ?: You simply click on the animation container that is playing the animation that you want to apply.
How to apply the selected animation ?: You do not need to apply the animation manually; by simply selecting the animation you want, it is automatically applied.

Animation

slide

ease

roll

pop

none

Theme

This section allows you to choose the code editor's theme and if you don't like any of the default theme options, you can create your own theme, below the theme options. You can also modify a default theme by clicking a default theme and them editing it in the theme creation section, below the default theme options. You can also delete default theme temporarily or perminently delete themes that you have created. You can open this section by clicking the "theme" button in the sidebar.
How to delete a theme ?: You can delete themes by clicking the delete botton in the themes container, at the very right of it. It is important to note though, that default themes can only be temporarily deleted.
How to undo the deletion of themes ?: You can undo the deletion of themes by clicking the button in the top right corner of the themes section; this will restore any theme you deleted during the editor's runtime, if you at any point refresh the editor or close it, the deleted themes (that are not default themes) are lost and can not be restored by the editor.

theme

none ⌧

enhanced dark ⌧

dark ⌧

light ⌧

gray ⌧

vintage ⌧

candy ⌧

green ⌧

red ⌧

light blue ⌧

deep light blue ⌧

dark purple ⌧

light yellow ⌧

light green ⌧

blackboard ⌧

custom

background

text

secundary

card

border

syntax

comment

string

keyword

copy

add new theme

Layout

This section lets you edit the file editing tool container layout, in files, and lets you toggle the sidebar and file nav container into a reduced state. In this section you also get the option to give the tool containers borders, and the option to put the tool containers in a reduced state. You can open this section by clicking the "layout" button in the sidebar.

layout

reduced bars

borders

islands

code

Projects

This section allows you to create, delete, rename, and open projects.
How to create a project ?: To create a project, you clicks on the option with the "NEW" text, enters a name in the project name input bar (optional), and clicks "Open Selected Projects" or exepts the website terms and conditions (depending on if you already had the website open, or just opened it).
How to rename a project ?: To rename a project, you just need to select the project that you want to rename, by clicking on the project, enter a new name in the project name input bar, and click "Enter"; and the project will be renamed to the new name.
How to delete a project ?: To delete a project, you click on the cross in the box in the top left corner of the project container (after deleting a project you get a pop-up in the top right corner of the site, that allows you to undo the deletion, for a few seconds after the deletion.
How to open a project ?: To open a project you just select the project you want to open and click the button that says: "Open Selected Projects", or wants you to accept the terms and conditions.
What does "casual use" do ?: When "casual use" is enabled, everything you do in the editor is not saved, except the cross poject stuff, like: themes, commands, and shortcuts; but anything like file edits, file uploads, file deletion, etc. is not saved. Casual mode simply gives you the ability to quickly program without having to think about local storage space (where everything is stored) or having to worry about cleaning up the editor afterwards.
What does the button with the sun icon do ?: The button with the sun icon lets you toggle between a lower contrast version of the project preview container and the regular version of it. This is useful if you are using dark mode, since, depending on the languages you use, or how far into the process of creating your project you are, the project background might be very bright, since it's white by default, and lowering the contrast makes it so the bright containers don't hurt your eyes with their brightness.

Cancel ☼

projets

NEWcreate a new project

⌧New Project

Project name:

casual use:

Open Selected Project

File Settings

This section allows you to disable tools that you don't want to see in your file editing environment, open tool settings, change the editor's font size, and it has 2 extra features at the bottom.
How do I disable/hide a tool ?: You hide a tool by switching the toggle switch, to the left of the tool's icon, off.
How do I open tool settings ?: You open tool settings by clicking the sign to the right of the icon of the tool. It's important to note though, that some tools don't have settings that can be edited and in those cases, the edit window will only give you the tool's description.
How do I change the editor's font size ?: You can change the editor's font size by scrolling down in the top section of the file settings, and sliding the font-size-slider; while you slide you'll get a live notification at the top that tells you how large the font is.
What are the features for ?: You can find information on them in the section.

index.html

lines: 14

length: 260

file type: HyperText Markup Language

font-size:

undo ↺ >

redo ↻ >

run ◁ >

copy □ >

delete ⌧ >

comment # >

move down ↓ >

move up ↑ >

pin ⚠ >

disable ☾ >

enable ○ >

search ⌕ >

teleport ⌕ >

commands/shortcuts ⌘ >

trim ● >

unfold → >

unselect ← >

remove indent ↤ >

add indent ↦ >

replace selected ⤻ >

attach note N >

replace all ⤻ >

line numbers

grid >

suggestions >

space indentation >

word select

zoom enabled

delete empty lines

delete comments

Files

This section allows you to upload, view, create, search, and open files. You can open this section by clicking the "files" button in the sidebar, or by pressing and holding the file navigation bar.
How do I search for files ?: You search for files by enetering a value in the search bar, inside the "files" section. While you type, the files that contain the entered text in the file path, will be shown and those who don't, will be hidden. If you want to see all files again, simply clear the search bar manually or click the "ready" button to the right of the search bar.
How to upload a file ?: You can upload a file by clicking the "upload" button and choosing your upload source (depending on the device). You can upload images and text files but it's important to note that images are not saved and are only available during runtime of the editor, until it is refreshed or closed.
How to create a file ?: You can create a file by clicking the "+"/plus button, then entering a unique file name in the prompt input that will appear after clicking the plus, and then clicking "submit" in the prompt. It's important that the entered file name is unique.
What does "view" do ?: The "view" button works like the "run" tool but it only ever opens the view window and does not open the python console. When you click the view button, the input bars above the viewing windows will be filled with the files name of the file that is currently open. This button is a good alternative for those who like to have the "run" button hidden in the tools area and don't plan to program with python.

upload

view

search...

index.html

styles.css

script.js

Templates

In this section you can browse templates, expand templates to inspect them, create new files, and add templates to your project (to expand upon them).
How do I add a template to my project ?: You have 2 ways to add a template to your project:
1. You can hover over the template and click the "copy" button, and after accepting the licence agreement, you have the templates code in the clipboard and you can then paste it into a file.
2. You can hover over the template and click the "add" button, after you then except the the licence agreement, the file will be added to your project.
How do I inspect a template ?: To inspect a template you hover over it and click the "enlarge" button. If you want to reduce it again, simply click on the "reduce" button in the top right corner of the enlarged template.
How to create a new file ?: You can create a file by clicking the button with the text: "add file", then entering a unique file name in the prompt input that will appear after clicking the button, and then clicking "submit" in the prompt. It's important that the entered file name is unique.

add file

enlarge

add

copy

template1.html

enlarge

add

copy

template2.html

enlarge

add

copy

template3.html

Project Notes

In this section you can create, edit, pin, attach, browse, and check notes.

How do I create a note ?: Here is a step by step guide on how to create a note:

Click the "+"/plus button, next to the note section header. After you click that button, a creation overlay will pop-up, where you can now create your note.
Choose the note type. At the top of the creation overlay you'll get to choose what note type you want. You can choose between a checkable note and a non-checkable note.
what's the difference between a checkable and a non-checkable note ?: A checkable note will be displayed with a checkbox next to it, while a non-checkable note will appear with just a dash "-" next to it.
Choose the font. Next or below the note type selection element you'll find a font selection element, here you can choose what font you want this note to have. This can be edited later, so don't worry about choosing the right font immediately.
Enter a note title. Below the note type selection and font selection, you get to enter a note title with up to 150 characters. The title is the only text of the note that is visible unless the note is expanded; use it to summarize the contents of the note description or treat the title as the note itself, in case the note is not that long.
Enter a note discription. This is optional but critical for extensive notes. Since the note title only allows up to 150 characters, the discription allows you to type out your note in more detail.
Attach your note to a file. This is optional but below the description input area there is a selection element that allows you to select a file that you can attach your note to. When a note is attached to a file it is added to a note container in the bottom right of the file. This can also be edited afterwards, so don't worry about attaching notes to files and changing your mind later. If you decide you don't want your notes to be in the bottom right corner perminently, you can also turn on "temporary display"; this makes it so the notes attached to files are only visible for a few seconds after the file has been opened.
click "create".

How do I edit a note ?: To edit a note, click the chevron to the right of the note that you want to edit, in the notes section, and this will open the notes editing section.
How do I expand a note ?: To expand a note in the notes section, you simply click the note and an overlay will appear from below that displays the notes content.
How do I expand a note in the notes area of a file ?: To expand a note that is in the notes area of a file, first expand the notes area by clicking the symbol in its top right corner and then click the chevron next to the note you want to expand; now you should be able to see the notes title and discription. To close that section, simply click the chevron in the top left corner of the expanded note.
How do I pin a note ?: To pin a note, open the notes editing section, by clicking the chevron to the right of the note in the notes section, and then click the pin simbol "⚠" in the top right corner of the editing section. To unpin it again, simply click it a second time.
How do I delete a note ?: To delete a note, open the notes editing section by clicking on the chevron to the right of the note in the notes section, and click the delete button at the bottom of it.

What about line notes ?: Line notes are notes that are attached to individual lines, you can attach a note to a line with the and here you can see what files have line notes and on the left of every displayed file, you can click the chevron to see what notes exactly are attached to that file. If you then click on the notes, you can edit them and you will get a list of line numbers that have a note attached. If you want to see a list of all lines with notes attached, you have to go to the file settings of the file you want to see the lines of with notes attached, and open the "N"/(attach note) tool settings.

Notes
+

Temporary display

⌕search for note...

No List Items

Files With Line Notes

No Line Notes Yet!

⤻

Replace/Replace all

This section allows you to enter the replacement type (regex or text), then enter the replace value below, then the replacement value below the arrow, and at the end click the replace button at the bottom to replace the replacement value with the replace value, in the current open file.

regex

[<{(]

↓

Hello World

replace

regex

This section allows you to edit and test JavaScript regex.
How do I edit a regex ?: You simply create a javascript regex with 2 forward slashes and click on it. After clicking on the regex, you'll get a pop-up in the top right corner and if you click on the "open" button to the right of the pop-up message, the regex editing section will be opened.
How do I test a regex ?: You test the regex by entering a string that you want to test your regex on, in the "Test String" input area, and clicking on the "Test Your Regex" button. After you click on the test button, the results are listed below tye button, in the "results" area.

regex

source: flag:

Test String:

Test Your Regex

Results:

Individual: Your results will appear here.

Text: Your results will appear here.

Use Regex

Edit your code from anywhere & everything.

Sidebar

Tools

Overlays

HTML Testing:

Python Testing:

Accessibility

Open, Setup, and Start Coding

Touch

Try It Out

Endless Themes

Personal Tool Layout

Workspace Grids

Dozens of tools

Countless Sections

Helpful Features

commands and shortcuts

commands

short-cuts

Animations

Animation

Theme

theme

syntax

Layout

layout

Projects

projets

File Settings

Files

Templates

Project Notes

Notes +

Replace/Replace all

regex

regex

regex

Ready to get started with Ailury.com ?

Edit your code from
anywhere & everything.

Notes
+