5 Dreamweaver-alternativ som du bör känna till
Adobe Dreamweaver är ett professionellt webbutvecklingsverktyg som kan användas för att designa webbplatser visuellt eller i kodredigeraren. Det stöder HTML, CSS, JavaScript och andra webbtekniker och erbjuder funktioner som förhandsgranskning i realtid och syntaxmarkering. Det är särskilt populärt bland designers och utvecklare som vill kombinera visuell design med direkt kodkontroll.
Vad är Adobe Dreamweaver?
1997 släppte Macromedia den första versionen av Dreamweaver exklusivt för Apples operativsystem Mac OS 8. Det var inte förrän nästan 3 månader senare - med version 1.2 - som stöd för Microsoft Windows-system implementerades. 10 år senare tog mjukvaruföretaget Adobe över webbutvecklingsprogrammet och lade till det i sin Creative Suite (som sedan dess har ersatts av Creative Cloud) som en ersättning för den tidigare inkluderade editorn GoLive. Den som vill använda den mycket omfattande applikationen för att skapa och designa responsiva webbapplikationer måste därför antingen teckna de enskilda produktabonnemang som erbjuds eller hyra det kompletta Creative Cloud-paketet, varför det främst är professionella användare som arbetar med programvaran.
Det här är vad som gör Adobe Dreamweaver så speciell
Dreamweaver imponerar med sitt typiska Adobe-gränssnitt, som är mycket bekant för användare av Photoshop, InDesign, Illustrator och liknande. Funktionsutbudet för HTML-redigeraren, som presenterar sig själv som måttet på allt när det gäller WYSIWYG, har vuxit avsevärt, särskilt sedan Creative Cloud släpptes, vilket gör att skriva kod blir en barnlek.
Det är till exempel möjligt att se alla ändringar i realtid utan att behöva ladda om sidan, eller att redigera CSS-kod direkt i HTML-filen tack vare en inline-redigerare. Dessutom hjälper den implementerade kodningsmotorn till att skriva ren kod genom att automatiskt komplettera snuttar via Emmet-stöd, generera automatiska indrag och färgkoda element som hör ihop. Dreamweaver erbjuder också följande funktioner:
- Kodvalidering
- Stöd för CSS preprocessorer (SASS, Less)
- PHP-stöd (version 5.6 och 7.1)
- Multipla markörer för att skriva och redigera olika kodrader samtidigt
- Integrerat CSS-ramverk Bootstrap för responsiv webbdesign
- Tillgång till licensfria bilder och vektorgrafik från Adobe Stock
- Enkel åtkomst till egen grafik, design och andra tillgångar via Creative Cloud
Vilka gratis Dreamweaver-alternativ finns det?
Om du har tillgång till alla Creative Cloud-produkter och har erfarenhet av att använda Dreamweaver kan du inte göra mycket fel med Adobes programvara. För utvecklare med en begränsad budget finns det dock bra Dreamweaver-alternativ som kan användas gratis. i de följande avsnitten presenterar vi 5 intressanta alternativ. Å ena sidan är syftet att presentera deras funktioner och specialiteter. Å andra sidan kommer även skillnader och likheter med Adobes programvara att belysas och användbarheten av de olika verktygen att granskas.
Visual Studio Kod
Visual Studio Code, ofta förkortat VS Code, är en kodredigerare med öppen källkod från Microsoft som snabbt har blivit den mest populära utvecklingsmiljön i världen sedan den släpptes 2015. Som ett gratis och plattformsoberoende Dreamweaver-alternativ imponerar editorn med sin höga flexibilitet, modulära struktur och aktiva community. VS Code körs på Windows, macOS och Linux och grundversionen har många funktioner som uppfyller kraven för moderna webbutvecklare. Dessa inkluderar till exempel integrerat Git-stöd, syntaxmarkering, intelligent kodkomplettering (baserat på IntelliSense), en integrerad terminal och en live-förhandsgranskning via motsvarande tillägg.
Trots fokus på ren kodning istället för visuella designelement som i Dreamweaver, kan Visual Studio Code utökas till en kraftfull WYSIWYG-liknande miljö med bara några plugins. Tillägg som Live Server möjliggör till exempel ett arbetsflöde som gör HTML-, CSS- och JavaScript-utveckling lika bekväm som med Dreamweaver. Den som använder språk på serversidan som PHP eller ramverk som React, Angular eller Vue får en sömlös utvecklingsmiljö med verktyg för debugging, linting och build som är direkt integrerade eller kan eftermonteras med ett klick i VS Code.

Tack vare det stora antalet tillgängliga teman, kortkommandon, snippet-bibliotek och användargränssnittsanpassningar är editorn extremt anpassningsbar. Speciellt utvecklare som började med Dreamweaver i ett grafiskt gränssnitt och nu vill byta till kodområdet kommer att tycka att VS Code är ett modernt, framtidssäkert alternativ som växer med ökande krav utan att behöva ta till en kommersiell licens.
Fördelar | Nackdelar |
---|---|
✓ Flexibel tack vare ett stort urval av tillägg och teman | ✗ Inget WYSIWYG-stöd utan tillägg |
✓ Stödjer alla moderna webbtekniker | ✗ Utbildningsinsats för nybörjare |
✓ Integrerad terminal, Git och debugger | ✗ Minnesintensivt med många tillägg |
KompoZer
Programvaran för webbutveckling KompoZer härstammar från Mozilla-projektet Nvu och är därför också baserad på Gecko-motorn. Ursprungligen var KompoZer en liten optimering av Nvu-programvaran, tills programmet slutligen släpptes som en fristående webbredigerare under de fria licenserna GNU GPL (GNU General Public License), GNU LGPL (GNU Lesser General Public License) och MPL (Mozilla Public License). Mozilla-teamet stoppade vidareutvecklingen 2010, men programvaran kan fortfarande användas på de flesta vanliga Windows- och macOS-system samt Ubuntu. Eftersom KompoZer är ett 32-bitars program är det inte längre kompatibelt med nyare macOS-versioner. Det finns över 20 olika språkpaket för KompoZer - bland annat tyska, engelska, franska, italienska och spanska.
Även om KompoZer inte är ett av de Dreamweaver-alternativ som kan mäta sig med Adobe-programmet när det gäller funktionalitet och komplexitet, erbjuder programmet med öppen källkod fortfarande sina användare ett antal funktioner som kan användas för att skapa professionellt utformade webbplatser:
- Kraftfull WYSWYG-redigerare som gör det enkelt att växla mellan kod och förhandsgranskning
- Integrerad CSS-editor inklusive importfunktion för befintliga stylesheets
- Anpassningsbara menyfält
- Korrekthetskontroll och syntaxmarkering
- Tabbar för samtidig redigering av flera sidor
- Formulärguide
- Integrerad markup cleaner som kontrollerar att dina projekt överensstämmer med W3C
- FTP-sidhanterare inklusive dra-och-släpp-funktion för mediefiler som t.ex. bilder

Dessutom finns det en handfull användbara tillägg till programmet - t.ex. en länkkontroll, som du kan använda för att kontrollera validiteten hos integrerade länkar. Som ett möjligt alternativ till Adobe Dreamweaver saknar KompoZer dock fortfarande PHP-stöd samt stöd för nyare webbstandarder som CSS3 och HTML5. Alla nedladdningsbara versioner för de olika plattformarna samt detaljerad dokumentation finns på KompoZers webbplats. Där har du också möjlighet att rapportera programfel eller lämna förslag på nya funktioner.
Fördelar | Nackdelar |
---|---|
✓ Snabbarbetande WYSIWYG-editor med förhandsgranskningsfunktion | ✗ Avsaknad av PHP-stöd |
✓ Finns på över 20 språk | ✗ Fortsatt utveckling stoppad |
✓ Programfilerna är bara några MB | ✗ Stöder inte moderna standarder som HTML5 eller CSS3 |
Phoenix
Phoenix är en modern, community-driven kodredigerare som kan ses som den direkta efterträdaren till det numera nedlagda Dreamweaver-alternativet Brackets. Efter Adobes officiella nedläggning av Brackets 2021 skapades Phoenix av dedikerade utvecklare för att bevara potentialen hos den populära editorn och samtidigt förbättra den på ett målinriktat sätt. Programvaran är tillgänglig under MIT-licensen och vidareutvecklas aktivt. Den är tillgänglig plattformsoberoende för Windows, macOS och Linux och använder, precis som sin föregångare, moderna webbteknologier som HTML, CSS och JavaScript. Phoenix har ett modernt användargränssnitt som är tydligt baserat på originalet, men vinner poäng med en reviderad arkitektur, prestandaoptimeringar och uppdaterade bibliotek.
Editorn riktar sig särskilt till frontend-utvecklare, men tack vare den öppna arkitekturen och expansionsmöjligheterna kan den även användas inom andra områden. Särskilt värt att nämna är inbyggd live preview, som automatiskt visar ändringar i HTML- och CSS-koden i webbläsaren (t.ex. Google Chrome) i realtid och utan manuell omladdning. Denna funktion stöds av den sömlösa integrationen av Node.js, som möjliggör snabb kommunikation mellan redigeraren och webbläsaren.

Phoenix får också poäng med andra funktioner:
- Inline-editorer: CSS- och JavaScript-regler kan redigeras direkt i HTML-dokumentet utan att byta fil.
- Modern tilläggshantering: Ytterligare funktioner och teman kan enkelt installeras via ett integrerat plugin-gränssnitt. Communityt arbetar aktivt med nya tillägg, bland annat syntaxmarkering, formateringsverktyg och linters för HTML, CSS och JavaScript.
- Platformsoberoende projekthantering: Projekt kan organiseras med hjälp av flikar och en integrerad filhanterare möjliggör snabb bläddring och redigering av kataloger.
Tack vare den konsekventa vidareutvecklingen, den bekanta användarupplevelsen och fokuseringen på moderna frontend-arbetsflöden är Phoenix för närvarande ett av de mest attraktiva open source-alternativen till Adobe Dreamweaver. Programmet är ett särskilt intressant alternativ för utvecklare som värdesätter användarvänlighet, live-förhandsgranskningar och en aktiv community.
Fördelar | Nackdelar |
---|---|
✓ Kontinuerlig vidareutveckling av communityn | ✗ Dokumentationen är fortfarande ofullständig på vissa ställen |
✓ Fokus på moderna standarder och prestanda | ✗ Begränsat stöd för språk på serversidan som PHP |
✓ Inline-editorer för CSS och JavaScript |
Aptana Studio
Aptana Studio är en gratis, integrerad utvecklingsmiljö från Axway. Det officiella stödet har nu upphört, men redigeraren kan fortfarande laddas ner från den officiella Aptana GitHub-katalogen. Plattformen är baserad på Java-verktyget Eclipse och stöder JavaScript, HTML5 och CSS3 samt olika programmeringsspråk som PHP, Python och Ruby. Dessutom kan Ajax-bibliotek som jQuery, Prototype eller script.aculo.us integreras direkt i applikationen och på så sätt användas i utvecklingsprocessen.
Förutom det breda stödet för programmeringsspråk och plattformar kännetecknas webbredaktören av följande kärnfunktioner:
- Kodguide: Kodguiden ger förslag på möjliga argument, egenskaper eller metoder och visar även stödet för alla HTML-, CSS- och JavaScript-element i ditt webbprojekt i vanliga webbläsare.
- Integrerade debuggers: Debuggers för JavaScript och Ruby-on-Rails är redan implementerade och hjälper till att upptäcka och åtgärda fel i din webbapplikation.
- Deployment Wizard: Aptana Studio erbjuder Deployment Wizard, ett verktyg som hjälper dig att ladda upp, ladda ner och synkronisera dina webbprojektfiler via FTP, SFTP och FTPS.
- Versionskontroll: Du kan enkelt länka ditt webbprojekt till Git och därmed säkerställa ett säkert, gemensamt arbete med källkoden, vilket är möjligt online på GitHub.
- Integrerat kommandoradsverktyg: Tack vare den inbyggda terminalen kan du köra systemkommandon direkt i Aptana Studio.
- Flexibel utvecklingsmiljö: Du kan konfigurera Aptana Studio som du vill och utöka de grundläggande alternativen med skript för standardkommandon och lägga till genvägar för att uppnå optimal användbarhet.

Tack vare den nära kopplingen till Eclipse erbjuder det kostnadsfria alternativet till Dreamweaver även dess grundläggande funktioner. Dessa inkluderar visuell syntaxmarkering, intelligent kodkomplettering och automatisk stängning av öppna taggar. Dessutom stöder Aptana Studio de senaste webbstandarderna som HTML5.
Fördelar | Nackdelar |
---|---|
✓ Stöd för olika programmeringsspråk som Perl, Python, PHP och Ruby | ✗ Många beroenden, inklusive Java, Git och Eclipse (i plugin-versionen) |
✓ Versionskontroll med hjälp av Git | ✗ Inget separat tyskt språkpaket |
✓ Stöd för de senaste webbteknikerna | ✗ Installationen fungerar endast med Node.js installerat, vilket Aptana inte påpekar |
✗ Användargränssnittet mycket komplext |
Pulsar
Pulsar är en community-utvecklad fork av Atom-editorn som ursprungligen utvecklades av GitHub, vars officiella stöd avbröts i december 2022. Syftet med Pulsar är att behålla de bekanta elementen i Atom samtidigt som man moderniserar föråldrade beroenden och tillhandahåller säkerhetsuppdateringar och nya funktioner. Projektet underhålls aktivt och är, precis som sin föregångare, tillgängligt under MIT-licensen. Apm, Atom Package Manager, vidareutvecklas också under namnet ppm (Pulsar Packet Manager) för att möjliggöra sömlös pakethantering. Pulsar är tillgänglig för Windows, macOS och Linux och stöder många programmeringsspråk som HTML, CSS, JavaScript, PHP, Python och andra, i linje med den ursprungliga Atom-filosofin.

Pulsars största styrka ligger i den konsekventa fortsättningen av den modulära arkitekturen: befintliga Atom-paket fortsätter att fungera för det mesta och communityn arbetar ständigt med migreringen av viktiga tillägg. Några av de välkända funktionerna inkluderar
- Intelligent autokomplettering: Editorn föreslår lämpliga kodavsnitt och funktioner medan du skriver, som du enkelt kan använda.
- Pakethantering med ppm: I likhet med apm kan du med ppm installera, ta bort och uppdatera tillägg direkt i editorn eller via terminalen.
- Git-integration: Pulsar erbjuder visuellt Git-stöd för att spåra och hantera ändringar i källkoden.
- Tema- och användargränssnittsanpassningar: Redigeraren kan i stor utsträckning anpassas visuellt och funktionellt och stöder olika färgscheman och kortkommandon.
Tack vare det aktiva deltagandet från tidigare Atom-användare fortsätter projektet att växa. Detaljerad dokumentation finns också på webbplatsen.
Fördelar | Nackdelar |
---|---|
✓ Mycket utbyggbar | ✗ Inkompatibilitet med äldre Atom-paket |
✓ Integrerad pakethantering och lösningar för versionskontroll | ✗ Inget officiellt stöd för tyska språket |
✓ Bra stöd för programmeringsspråk |
De bästa Dreamweaver-alternativen från sektorn för öppen källkod: Slutsats
Adobe Dreamweaver erbjuder nya programmerare ett omfattande komplett paket för att utveckla webbplatser, som tack vare sina många funktioner och direktanslutning till Creative Cloud utan tvekan erbjuder allt du behöver för att ** skapa en framgångsrik och skickligt utformad webbplats**. Detta är dock också förknippat med en hög grad av komplexitet och löpande kostnader. Dessutom är Adobes programvara inte direkt en resursbesparande lösning. Erfarna utvecklare förlitar sig dock vanligtvis på editorer som ger dem större frihet.
De open source-alternativ till Dreamweaver som presenteras i denna guide utgör en mellanväg mellan Adobe-programmets modulära princip och vanlig programmering med en konventionell textredigerare. Detta beror främst på den fritt tillgängliga programkoden, som ger webbredaktörer med öppen källkod deras höga grad av flexibilitet. Du kan använda ett program som Pulsar antingen som en minimalistisk editor med syntaxmarkering och kodkomplettering eller som en fullfjädrad utvecklingsmiljö som bara i några få avseenden är sämre än den kommersiella Dreamweaver.
Å andra sidan kan du inte förvänta dig att gratislösningarna ska erbjuda samma stabilitetsnivå som Adobe-produkten. Professionell programvara som Dreamweaver vidareutvecklas ständigt, har de senaste webbstandarderna till hands och representerar ofta - som i fallet med Dreamweaver - ett heltäckande bekymmersfritt paket som har mognat under årtionden. Om det uppstår problem med programvaran eller om du behöver hjälp med ditt projekt finns det kompetent support att tillgå. Med de kostnadsfria lösningarna är du beroende av hjälp från communityn - oavsett om det handlar om tekniska svårigheter med programmet eller allmän vidareutveckling.
Tyskt språkpaket | HTML5 och CSS3 | PHP | Särskilda funktioner | ||
---|---|---|---|---|---|
VS Code | ✓ | ✓ | ✓ | allomfattande utvecklingsmiljö | |
Aptana Studio | &kors; | &kontroll; | &kontroll; | JavaScript och Ruby-on-Rails debugger, baserad på Eclipse | |
Pulsar | ✓ | ✓ | &kors; | Många ytterligare paket | |
Phoenix | ✓ | ✓ | ✓ | Inline-editorer för CSS och JavaScript | |
KompoZer | ✓ | &kors; | &kors; | &kors; | låg filstorlek |