Als een project geopend wordt vanuit het beheerpaneel, kom je terecht bij in de code. Hier kun je je project beheren, bewerken en bekijken.
De eerste keer ziet het er zo uit:

Mappen

Links aan de zijkant van de console (middelste kolom) zijn de mappen die je tot je beschikking hebt. Daar staan er al een paar standaard in, zoals je basismap, en een e-mailmap. Je kunt ook je eigen mappen aanmaken:

1. Klik onderaan de middelste kolom op '+ Nieuwe map'.
2. Voer een mapnaam in en klik op 'Map maken'. Je map zal automatisch een index bestand krijgen. De map is, mocht je een productieproject hebben, bereikbaar op jouw-project.nodum.nl/jouw-map-naam

Bestanden

Als je op de verschillende mappen klikt krijg je bovenaan verschillende tabbladen die in de map zitten te zien. Tabbladen zijn de bestanden die je kunt bewerken in je huidige map. In de basismap zijn bijvoorbeeld de bestanden/pagina's voor de foutmeldingen (die hebben een nummer, 500, 404, 403) de Main pagina, en de Sidebar, Navbar en Footer. Deze drie laatste zijn afhankelijk van je instellingen of je ze wel of niet toont op de pagina.

Sidebar/Navbar/Footer
Ga naar instellingen (meest linkse kolom), onder template staat het volgende:

[template]     
        ;   hasSidebar      = false 
        ;   hasNavbar       = true 
        ;   hasFooter       = true 

Wil je een sidebar/navbar/footer? Haal dan de ; weg, je ziet dat de code van grijs naar gekleurd gaat en verandert false in true.
Wil je niet een sidebar/navbar/footer? Plaats dan de ; er weer voor of verander true in false.

De functionaliteiten binnen de console
De zwarte text editor rechts zal je direct opvallen. Met een beetje basiskennis HTML kom je al een heel eind, maar we hebben zelf nog een aantal handige syntax- en functieverbeteringen geïmplementeerd.

Text editor

Als je op een tabblad klikt, kom je in de zwarte text editor van die pagina. Klik bijvoorbeeld op tabblad 'main', dan kan je in de zwarte text editor je code schrijven van de beginpagina van een website. Onder het tabblad 404 schrijf je de code die hoort bij het niet vinden van een pagina.
Rechts is een sidebar met verschillende soorten syntax waar je uit kunt kiezen: HTML, Twig en markdown. Het zal je opvallen dat de kleuren in de text editor zich aanpassen aan de syntax die je kiest. Dit is handig voor de leesbaarheid en overzichtelijkheid van je code.
Zet je hem op "Auto", (rechtsboven onder de zoekfunctie voor bestanden) en je werkt in een Twig bestand met Html en Twig syntax dan herkent nodum deze twee talen en kan hij auto-suggesties geven om je tags af te sluiten.
Onder 'auto' zit "Line", dit zorgt ervoor dat er verticale lijnen in de text editor verschijnen. Zo kan je gemakkelijk zien of je je tags allemaal hebt afgesloten.

• HTML: een veelgebruikte mark-up taal.
  
• Twig: een simpele programmeertaal. Sla waardes op in variabelen, die je later weer kunt weergeven, voer berekeningen uit, geef automatisch dingen meerdere keren weer door loopjes en meer. Vind hier de volledige documentatie.
  
• Markdown: Markdown is een handige syntax voor simpele tekstbewerking. Denk aan lijstjes, paragrafen, kopjes.
  

"Wrap"
Deze optie zorgt ervoor dat je syntaxes worden afgebroken en op de volgende regel verder gaan, zodat je volledige code altijd goed leesbaar is.

"Mobile version"
Altijd al jezelf afgevraagd hoe jouw website er op een mobieltje uitziet? Is hij wel voldoende responsive? Je kan er achter komen met deze optie. Je bestanden zie je snel in een mobiele preview modus. Vink hiervoor mobile aan en druk vervolgens op ctrl p of klik in plaats van ctrl p op de preview button.

"Desktop version"
In de meeste rechtse balk naast de text-editor zie je de button van een computer met een oog daarin. Dit is de preview button die je net als ctrl p brengt naar de preview desktop versie van je applicatie of website. De preview button werkt zowel voor de desktop version als ook voor de mobile version. Je kan de button mobile version aangevinkt hebben staan en vervolgens op de onderste preview button klikken, dan zie je de preview mobile version of je kan de mobile version uitgevinkt hebben staan dan zie je als je op de preview button klinkt de desktop preview version.

"Snippetmanager"
Hieronder zit een icoon met drie blokjes, het icoon voor de "Snippetmanager" Hiermee kan je stukjes code die je vaak gebruikt opslaan en makkelijk invoegen als je het weer wilt gebruiken. Lees hier meer over in het hoofdstuk over Snippetmanager.

"Vrijgeef Button"
Het slotje is het laatste icoon in het rijtje, dit is de vrijgeef button. Deze is toegevoegd in de update van versie 2.1.0 Als je in een bestand werkt kan op dat moment niemand anders in hetzelfde bestand werken. Met de vrijgeef button kan je een bestand vergrendelen, nu kan iemand anders in dit bestand werken. Het scherm krijgt bij degene die op de vrijgeef button heeft gedrukt een rode gloed en een alleen-lezen melding. Als je rechtsonder op vernieuwen drukt ontgrendel je het scherm weer. Nu kan jij weer in het bestand werken. Deze functionaliteit is handig als je samenwerkt en het bestand toegankelijk wilt maken voor anderen om erin te werken. Je kan ook live meekijken wat de ander aan het typen is in het bestand.

Text-editors
Elk Twig bestand heeft 3 interne text editors. Dit zijn Code, CSS, en JS en je vindt ze onderaan de text editor. Markdown bestanden hebben deze functionaliteit niet nodig omdat ze geen javascript/CSS gebruiken. 'Code' gebruik je om je html/twig syntax neer te zetten. Daarnaast staat 'CSS' en 'JS', als je daar op klikt krijg je weer een lege text editor waar je je CSS syntax inzet. En in JS zet je je javascript, of bibliotheken zoals jQuery, en/of Vue.JS neer. Je hoeft in deze text editors niet meer boven en onder aan de pagina <html></html>,<style></style>, <script></script>neer te zetten, dit begrijpt nodum zelf al.

Binnen de text editor van CSS kan je ook Sass gebruiken. Sass zorgt voor een CSS bestand wat overzichtelijker is en helpt je om sneller te coderen. Sass is een preprocessor taal, die het mogelijk maakt om nieuwe functies die momenteel niet beschikbaar zijn in CSS wel te gebruiken. Een aantal voorbeelden hiervan zijn het gebruik van variabelen, elementaire wiskunde operators, nesting, mixins etc. Wil je meer informatie kijk dan op de site van Sass.

Auto-complete
Een handige functie van de text editor in nodum, is dat de editor je helpt bij het coden. Dit doet het bijvoorbeeld door suggesties te maken als je begint met typen, Typ bijvoorbeeld <d en je krijgt een lijstje te zien met suggesties. Dit is handig bij het foutloos overnemen van class of ID namen. Ook kan de editor codes voor je aanvullen, zodat je niet de hele functie hoeft te typen. Een voorbeeld hiervan is {% do mail , de auto-complete geeft al een suggestie van mail.send, als je daar op klikt zal hij de functie voor je aanvullen zodat je snel weet wat je nog moet invullen om te kunnen mailen. Dit alles helpt om minder fouten te maken en sneller te coderen. Een derde handigheid is dat bij het openen van een tag meteen de sluit tag wordt gegenereerd. Bijvoorbeeld als je typt <form>, zal de editor gelijk </form> in verticale lijn onder jouw geopende tag zetten. Handig hier aan is ook dat als je een lange code hebt geschreven, en snel wilt weten of je nog iets moet sluiten de editor je een suggestie geeft of je nog iets moet sluiten. Als je bijvoorbeeld </ typt en je moest nog een div sluiten de editor al </ veranderd in </div>. Zo weet je snel of je alle tags wel netjes hebt gesloten.

Met de update van versie 2.1.4 is er hierop een grote uitbreiding gekomen, er worden nu ook namen van variabelen en attributen suggesties gedaan. Zo wordt de kans verkleind op een foutieve class-name en het versneld jouw programmeerwerk aanzienlijk.
Ook voor filters ``|wordt er een suggestie gedaan. Een aantal filters bevatten meerdere argumenten die worden als suggestie getoond. Een voorbeeld hiervan is|sort_by_keydie als autosuggestie: DESC terug geeft. Er worden alleen filter suggesties gedaan na|```.
En als laatste auto-suggest toevoeging worden ook de namen van Mongo collections aangevuld, waardoor je hier geen spelfouten meer in kunt maken. Tevens worden de methodes voor mongo.* (get, set, find, enz) aangevuld bij custom collections.

Code-Beautify
Met de update van versie 2.1.4 is het mogelijk om met CTRL B Code beautify je code in een keer juist in te springen. Deze functie veranderd niets aan alles wat tussen tags staat. Deze functionaliteit werkt met HTML, CS en Javascript. Maar ook als je Sass of Vue-JS als schrijfwijze gebruikt, begrijpt code beautify deze opmaak. Minified JS of CSS code zal code beautify niet uitsplitsen, bij meer dan >100 tekens per regel blijft de code gelijk gecomprimeerd.